Kendo Grid not retaining checkbox selection after drag and drop

5 posts, 0 answers
  1. chaithra
    chaithra avatar
    3 posts
    Member since:
    Dec 2017

    Posted 15 Mar Link to this post

    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?
  2. Tsvetina
    Admin
    Tsvetina avatar
    2268 posts

    Posted 16 Mar Link to this post

    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.
  3. chaithra
    chaithra avatar
    3 posts
    Member since:
    Dec 2017

    Posted 20 Mar in reply to Tsvetina Link to this post

    Thank you Tsvetina
  4. chaithra
    chaithra avatar
    3 posts
    Member since:
    Dec 2017

    Posted 23 Mar in reply to Tsvetina Link to this post

    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);
                }


            });
        });


  5. Tsvetina
    Admin
    Tsvetina avatar
    2268 posts

    Posted 26 Mar Link to this post

    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.
Back to Top