This is a migrated thread and some comments may be shown as answers.

Kendo Grid not retaining checkbox selection after drag and drop

4 Answers 963 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
chaithra
Top achievements
Rank 1
chaithra asked on 15 Mar 2018, 10:51 AM
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?

4 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 16 Mar 2018, 03:22 PM
Hi Chaithra,

You can use the Grid persistSelection setting to maintain the rows selected state between Grid rebinds. Here is an example with this setting enabled:
https://dojo.telerik.com/AZUlEzil

Note that this setting requires that you set an id field for your data, like this:
schema: {
  model: {
    id: "ProductID",
    fields: {
      ProductName: { type: "string" },
      UnitPrice: { type: "number" },
      UnitsInStock: { type: "number" },
      Discontinued: { type: "boolean" }
    }
  }
}

The Grid uses the unique values of this field to store the selected items between data changes.


Regards,
Tsvetina
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.
0
chaithra
Top achievements
Rank 1
answered on 20 Mar 2018, 05:29 AM
Thank you Tsvetina
0
chaithra
Top achievements
Rank 1
answered on 23 Mar 2018, 07:57 AM

Hi, I am using PersistSelection with an Id of type String. Still checkbox selections are not retained after drag and drop of grid row. Please find the code below.

 

var grid = $("#GridData").kendoGrid({


            dataSource: {
                transport: {
                    read: {
                        url: "/Dashboard/GetValues"
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "string" },
                            Name: { type: "string" },
                            Age: { type: "number" },
                            Value: { type: "number" },
                            MRT: { type: "number" },
                            YRT: { type: "number" }
                        }
                    }
        }
            },
            scrollable: false,
            persistSelection: true,
            columns: [


                 {
                     field: "Id",
                     title: "<input id='checkAll', type='checkbox', class='check-box' />",
                     template: "<input type=\"checkbox\"  class=\"checkbox\" data-id='#= Id#'  />",
                 },
                 {
                     field: "Name",
                     title: "Name",
                     template: "<a  href='javascript:void(0);'  data-measureid='#= Id#' > #=Name# </a>",
                 },
                  {
                      field: "Age",
                      title: "Age",
                  },
                   {
                       field: "Value",
                       title: "Value",
                     

                   },
                    {
                        field: "MRT",
                        title: "MRT",
                    },
                     {
                         field: "YRT",
                         title: "YRT",
                     },


            ],


            dataBound: function () {
                $("#checkAll").change(function () {
                    if (this.checked) {


                        $('#checkAll').attr('checked', 'checked');
                        var elements = document.getElementsByClassName("checkbox");
                        for (i = 0; i < elements.length; i++) {
                            elements[i].checked = true;
                            $(elements[i]).addClass("checkbox-selection");
                        }
                    }
                    else if (!this.checked) {
                        $('#checkAll').prop('checked', false);
                        var elements = document.getElementsByClassName("checkbox");
                        for (i = 0; i < elements.length; i++) {
                            elements[i].checked = false;
                            $(elements[i]).removeClass("checkbox-selection");
                        }
                    }
                });
                $(".checkbox").bind("click", function () {
                    if (this.checked) {
                        $(this).parent().addClass("checkbox-selection");
                    }
                    else {
                        $(this).removeClass("checkbox-selection");
                    }


                    var lenghtOfUnchecked = $('.checkbox:checkbox:not(:checked)').length;
                    if (lenghtOfUnchecked > 0) {
                        $('#checkAll').prop('checked', false);
                    }
                    else if (lenghtOfUnchecked === 0) {


                        $('#checkAll').prop('checked', true);


                    }


                });
            }
        }).data("kendoGrid");


        grid.table.kendoSortable({
            filter: ">tbody >tr",
            hint: $.noop,
            cursor: "move",
            placeholder: function (element) {
                return element.clone().addClass("k-state-hover").css("opacity", 0.65);
            },


            container: "#GridData tbody",
            change: function (e) {
                newIndex = e.newIndex,
                data = grid.dataSource.data(),
                dataItem = grid.dataSource.getByUid(e.item.data("uid"));


                grid.dataSource.remove(dataItem);
                grid.dataSource.insert(newIndex, dataItem);
                $('#checkAll').prop('checked', false);
            }


        });
    });


0
Tsvetina
Telerik team
answered on 26 Mar 2018, 03:37 PM
Hi Chaithra,

I see now that your Grid uses custom checkbox selection. The persistSelection property works only with the built-in checkbox selection of the Grid, as demonstrated in this demo:
Grid / Checkbox selection

Is there a specific reason why you do not use the built-in selection? If it is not possible to switch to it, you will need to manually persist the selected items like shown in this example:
Persist Row Selection during Data Operations

Instead of using the Grid change event, you will need to save the selected row IDs inside your custom selection event handlers.

Regards,
Tsvetina
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.
Tags
Drag and Drop
Asked by
chaithra
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
chaithra
Top achievements
Rank 1
Share this question
or