Kendo UI Grid: update a group when row is drag and dropped in different group

[Perry]

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]

Hello, Perry,

Thank you for the details.

Indeed, currently, the change event or any of the sortable events, will not provide information on where the item is dropped.

The integration between the Sortable widget and the groupable Grid is one of the listed known limitations:

https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/integration#known-limitations

Apologies for the inconvenience this may have caused you and the time spent trying the integrate this.

We recommend to always check the known limitations sections of the used widgets to ensure, that no additional time will be spent trying to integrate it.

Regards,
Stefan
Progress Telerik