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

2 posts, 0 answers
  1. Perry
    Perry avatar
    8 posts
    Member since:
    Nov 2015

    Posted 18 May 2018 Link to this post

    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 datasource schema:
    //Defines grid of main Kendo grid for Questions
       $scope.questionsDataSource = new{
           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>' +
            dataBound: function (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#",
                        //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
                .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("uid"));
                // reorder the datasource
                if (newIndex != oldIndex) {
                    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 =;
                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);

  2. Stefan
    Stefan avatar
    2475 posts

    Posted 22 May 2018 Link to this post

    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:

    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.

    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top