Telerik Forums
Kendo UI for jQuery Forum
1 answer
241 views

In searching this forum I came across this post from 2013.... https://www.telerik.com/forums/get-scheduler-timeslot-on-kendodroptarget

It mentions that this may be implemented in a future release. I've not found any information that indicates this is possible. I'm looking at placing a series of div objects that represent different types of events (work, lunch, meeting, day-off etc) along side a Scheduler. A user will drag and drop a div onto a scheduler and that will create a scheduler event in the slot it was dropped onto. Is this possible?

Thanks

Martin
Telerik team
 answered on 08 Nov 2019
1 answer
849 views

Hi.

Is it possible to drag an item from one browser window to another (both on the same site)? I can get this to work with the HTML5 drag and drop, but not kendoDraggable. The draggable item will not move outside the window/container.

Example here: https://dojo.telerik.com/oCogArOf

 

- Odd

Nencho
Telerik team
 answered on 05 Sep 2019
1 answer
55 views

hello,

i'm trying to Integrate kendoDraggable with kendoSortable (inside ListView)

here is an example : https://dojo.telerik.com/iZOfuNoW

 

i want to drag a button and drop it inside Sortable ListView 

Tsvetina
Telerik team
 answered on 07 Nov 2018
1 answer
204 views

Hello,

I have problems getting draggable to work in IE 11.

Example here:

https://dojo.telerik.com/OVeseMiQ/6

It is working in the latest version of Firefox and Chrome and also Edge.

Not sure if it's a kendo issue or maybe a JQuery problem.

Can you help ?

 

Ivan Danchev
Telerik team
 answered on 29 Aug 2018
1 answer
115 views

Hi, 

Do we have anything similar to https://jqueryui.com/draggable/#snap-to where i can specify grid height width 

I don't want to use Diagram here

 

Konstantin Dikov
Telerik team
 answered on 29 May 2018
1 answer
750 views
For the life of me, I cannot find out how to update a row's group when I'm using drag and drop to drop a row from one group to another.
Here is my grid's schema:
//Defines grid of main Kendo grid for Questions
   $scope.questionsDataSource = new kendo.data.DataSource({
       autoSync: true,
       schema: {
           model: {
               fields: {
                   GroupId: { type: "int", editable: false },
                   GroupName: { type: "string", editable: false, title: "Group" },
                   GroupSortOrder: { type: "int", editable: false },
                   Id: { type: "int", editable: false },
                   Text: { type: "string", editable: true },
                   AnswerTypeLU: { type: "int", editable: false },
                   RowNumber: { type: "int", editable: false },
                   IsRequired: { type: "bool", editable: false },
                   IsHidden: { type: "bool", editable: false },
                   AllowNotes: { type: "bool", editable: false },
                   AllowAttachFiles: { type: "bool", editable: false },
                   Special: { type: "string", editable: false },
                   Response: { type: "string", editable: false },
                   AnswerId: { type: "int", editable: false },
                   AnswerValue: { type: "string", editable: false },
                   CorrectAnswer: { type: "bool", editable: false },
                   AnswerBitValue: { type: "int", editable: false },
                   AnswerArray: { type: "string", editable: false },
               }
           }
       },
       //This allows the Kendo grid to group questions based on the group they are in
       group: {
           field: "GroupName"
       },
       //Sets default sort order for table. Current settings sorts by row and number
       sort: [ { field: "RowNumber", dir: "asc" }]
   });




Here is my grid:
$scope.questionsGrid = {
        dataSource: $scope.questionsDataSource,
        scrollable: false,
        sortable: true,
        selectable: 'multiple',
        resizable: true,
        persistSelection: true,
        filterable: true,
        reorderable: true,
        editable: false,
        columnMenu: true,
        excel: {
            fileName: "questionnaire.xlsx",
            allPages: true,
            proxyURL: "/Common/FileHandlers/KendoSaveFile.aspx"
        },
        toolbar: kendo.template('<div class="toolbar">' +
            '<a type="button" id="questionsGridExport" class="btn btn-default k-button-icontext k-grid-Export pull-right"><span class="k-icon k-i-excel"></span>Export to Excel</a>' +
        '</div>'),
        dataBound: function (e) {
            $scope.dataBound(e);
        },
        columns: [ //Add, remove, or customize kendo columns here
            ////{ field: "GroupName", template: "#=GroupName#", groupHeaderTemplate: "Group: #=value#" },
            //{ title: '<input onclick=\'selectAll(this)\' type=\'checkbox\' />', template: "<input class='checkbox' type='checkbox' />", width: "30px" },
            { field: "RowNumber", title: "#", width: "10px" },
            {
                field: "Text", title: "Question",
                groupHeaderTemplate: "Name: #:count#",
                template:
                    //Quick Kendo Tip: 'dataItem' is key for plugging in data
                    //These 3 rows add icons for if the question is required, notes are allowed, and if attach files are allowed
                    "<i ng-show='questionAddon(dataItem.IsRequired)' style='color:red; float:right;' class='fa fa-asterisk addon pull-right;'></i>" +
                    "<i ng-show='questionAddon(dataItem.AllowNotes)' style='color:orange; float:right;' class='icon icon-note addon'></i>" +
                    "<i ng-show='questionAddon(dataItem.AllowAttachFiles)' style='color:dodgerblue; float:right;' class='icon  icon-cloud-upload addon'></i>" +
                    "<i ng-show='questionAddon(dataItem.MultiFileUpload)' style='color:purple; float:right;' class='fa fa-copy addon'></i>" +
                    "#: Text #" //Kendo template function overides anything that would normally show in the 'field'. So you need to have '#: fieldName #' included in the template to show the field data
            },
            { field: "IsRequired", title: "Required", template: "{{Is_Required[dataItem.IsRequired]}}" },
            { field: "AnswerValue", title: "Answer" },
            { field: "AnswerTypeLU", title: "Type", template: "{{AnswerTypeLUCodes[dataItem.AnswerTypeLU]}}" },
            {
                title: "Edit",
                template: "<button class='btn btn-default' data-target='.edit-question-modal' ng-click='editQuestion(dataItem)' data-toggle='modal' style='margin:0px; padding:2px 5px 2px 5px;'><i class='fa fa-pencil' title='Edit' style='margin-right:5px;'></i>Edit</button>",
                width: "30px",
            },
            { field: "questionId", hidden: true, title: "Id", template: "{{dataItem.Id}}" },
        ]
    }


And this is the "change" event function. I would have thought there would be something in the "e" (event parameter) of the change event that tells me the new group I'm dropping this row into. That's all I need to know and I can do the rest:

$scope.sortableOptions = { //This needs it's own Kendo sortable wrapper to make the table sortable in the HTML doc
        filter: ".k-grid tr[data-uid]",
        //cursor: "move",
        placeholder: function (element) {
            return element
            .clone()
            .removeAttr("uid")
            .addClass("k-state-hover")
            .css("opacity", 0.65);
        },
        container: ".k-grid tbody",
        change: function (e) {
            var grid = $scope.questionsGrid;
            var oldIndex = e.oldIndex;
            var newIndex = e.newIndex;
            var dataItem = grid.dataSource.getByUid(e.item.data("uid"));
 
            // reorder the datasource
            if (newIndex != oldIndex) {
                grid.dataSource.remove(dataItem);
                grid.dataSource.insert(newIndex, dataItem);
            }
 
            var droppedQuestions = $.grep($scope.questionnaire.FlatQuestions, function (data, index) {
                return dataItem.Id === data.Id;
            });
            var questiontoUpdate = droppedQuestions[0];
            questiontoUpdate.SortOrder = newIndex;
            questiontoUpdate.RowNumber = newIndex + 1;
 
            var questionsGrid = $("#questionsGrid").data("kendoGrid");
            var data = questionsGrid.dataSource.data();
            var totalNumber = data.length;
            var csv_sorted_questioIds = "";
 
            var currentGroupId = null;
            var currentGroupName = "";
            var currentGroupSortOrder = 0;
            var needToSaveQuestion = false;
 
            // get the list of questionIds in the order we want
            for (var i = 0; i < totalNumber; i++) {
                var currentDataItem = data[i];
                // get the group info of the current data item
                currentGroupId = currentDataItem.GroupId;
                currentGroupName = currentDataItem.GroupName;
                currentGroupSortOrder = currentDataItem.GroupSortOrder;
 
 
                if (csv_sorted_questioIds === "") {
                    csv_sorted_questioIds = currentDataItem.Id.toString();
                }
                else {
                    csv_sorted_questioIds += "," + currentDataItem.Id.toString();
                }
 
                if (newIndex === i && questiontoUpdate.GroupId !== currentGroupId) {
                    // update the row with the new group info
                    questiontoUpdate.GroupId = currentGroupId;
                    questiontoUpdate.GroupName = currentGroupName;
                    questiontoUpdate.GroupSortOrder = currentGroupSortOrder;
                    needToSaveQuestion = true;
                }
            }
 
            $scope.saveQuestionSortOrder($scope.clientData.EventId, $scope.clientData.QuestionnaireId, $scope.questionnaire.HostCompanyId, $scope.questionnaire.Name, $scope.questionnaire.Label, csv_sorted_questioIds);
        }
    };

Stefan
Telerik team
 answered on 22 May 2018
2 answers
240 views

Recently, I have tried to minimize the size of my Kendo js file. I am only selecting elements that I have used in the application. On publishing the application I am getting this error in the console. Any idea, which dependent js files are missing.

Below the error:

kendo.all.min_latest.js:9 Uncaught TypeError: p.HierarchicalDragAndDrop is not a constructor
    at init._dragging (kendo.all.min_latest.js:9)
    at new init (kendo.all.min_latest.js:9)
    at HTMLDivElement.<anonymous> (kendo.all.min_latest.js:2)
    at Function.each (jquery.min.js:3)
    at init.each (jquery.min.js:3)
    at init.e.fn.(anonymous function) [as kendoTreeView] (http://localhost:8080/app/kendo2015/kendo.all.min_latest.js:2:2754)
    at ChartTablesTree.prepareView (chartTablesTree.js:882)
    at Worker.$thisClass.processTableColumnWorker.onmessage (chartTablesTree.js:509)

Kiran
Top achievements
Rank 1
 answered on 06 Apr 2018
1 answer
97 views

Hello i am using .kendoSortable and i want to restrict the user from dropping rows at the column headers line. is this possible?

 

Preslav
Telerik team
 answered on 03 Apr 2018
4 answers
1.0K+ views
Whenever a kendo grid row is reordered using drag and drop functionality, checkbox selections are not retained. The grid is reset to default. How can the checkbox selections be retained?
Tsvetina
Telerik team
 answered on 26 Mar 2018
1 answer
144 views

Hi, 

I have a "table" and labels inside table's td.I applied kendoDraggable to all labels in tds. And the all tds also droppable. Briefly, i want to move elements (which insde table cell) to another cell. 

Everything seems ok, i can drag and drop but when i drag element to not droppable area, element disappeared, not reverting with animation. And some laggy behaviour when dragging. Am i missing a point ?

Here is my implementation

$("#itemTable label.item-label").kendoDraggable({
                hint: function (element) {
                    var clone = $(element).clone();
                    $(clone).css('border', "1px solid black");
                    $(clone).css('width', 'auto');
                    $(clone).css('background-color', '#ffffff');
                    return clone;
                },
                dragstart: draggableOnDragStart,
                drag: draggableOnDrag,
                dragend: draggableOnDragEnd,
                dragcancel: draggableOnCancel
            });

            $("#itemTable tbody tr td").kendoDropTarget({
                dragenter: droptargetOnDragEnter,
                dragleave: droptargetOnDragLeave,
                drop: droptargetOnDrop
            });

            function droptargetOnDrop(e) {
                console.log("drop");
                console.log(e);
                $(e.draggable.currentTarget).appendTo($(e.dropTarget[0]));
            }



Thanks   

Vedat
Top achievements
Rank 1
 answered on 09 Mar 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?