Select All rows for Kendo Grid in Virtual Scroll behaves weirdly

I have integrated kendo grid to show the orders created by user. Due to large number of data, I have integrated virtual scroll due to which lazy loading can be added to grid. As my client do not want pagination option I have added virtual scroll which do not affect previous design with great feature.

Now I have a button to select all the records and then user will drag the selected records and drop to other kendo grid. But due to virtual scroll, user can select only the visible records i.e. the records initially display due to pagesize of 10. Is there any way to select all the records with virtual scrolling?

I think if I can scroll the scrollbar to the bottom and then select all records then it should work but the previous selections are lost when I scroll down. Here is the sample dojo.

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/grid/virtualization-remote-data">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
</head>
<body>

        <div id="example">
          <input type="button" value="Show Selected Items" id="showSelection" />
            <div id="grid"></div>
            <script>
                
$(document).ready(function () {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata",
            serverPaging: true,
            serverSorting: true,
            pageSize: 10,
            transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            }
        },
        height: 543,
        scrollable: {
            virtual: true
        },
        sortable: true,
        columns: [
          {
              title: 'Select All', headerTemplate: "<input type='checkbox' id='header-chb' class='k-checkbox header-checkbox'><label class='k-checkbox-label' for='header-chb'></label>",
              template: function (dataItem) {
                  return "<input type='checkbox' id='${dataItem.ProductID}' class='k-checkbox row-checkbox'><label class='k-checkbox-label' for='${dataItem.ProductID}'></label>"
              },
              width: 80
          },
           { field: "OrderID", title: "Order ID", width: 110 },
            { field: "CustomerID", title: "Customer ID", width: 130 },
            { field: "ShipName", title: "Ship Name", width: 280 },
            { field: "ShipAddress", title: "Ship Address" },
            { field: "ShipCity", title: "Ship City", width: 160 },
            { field: "ShipCountry", title: "Ship Country", width: 160 }
        ]
    });

    //bind click event to the checkbox
  var grid = $("#grid").data("kendoGrid");
    grid.table.on("click", ".k-checkbox", selectRow);

    $('#header-chb').change(function (ev) {
        var checked = ev.target.checked;
        $('.row-checkbox').each(function (idx, item) {
            if (checked) {
                if (!($(item).closest('tr').is('.k-state-selected'))) {
                    $(item).click();
                }
            } else {
                if ($(item).closest('tr').is('.k-state-selected')) {
                    $(item).click();
                }
            }
        });
    });


    var checkedIds = {};
    function selectRow() {
        var checked = this.checked,
            row = $(this).closest("tr"),
            grid = $("#grid").data("kendoGrid"),
            dataItem = grid.dataItem(row);

        checkedIds[dataItem.OrderID] = checked;
        if (checked) {
          //-select the row
          row.addClass("k-state-selected");
        } else {
          //-remove selection
          row.removeClass("k-state-selected");
        }
      }

   $("#showSelection").bind("click", function () {
          var checked = [];
          for(var i in checkedIds){
            if(checkedIds[i]){
              checked.push(i);
            }
          }
//debugger;
          alert(checked);
        });
  
});
              
             
      
              
            </script>
            <style>

                /*horizontal Grid scrollbar should appear if the browser window is shrinked too much*/
                #grid table
                {
                    min-width: 1190px;
                }

            </style>
        </div>


</body>
</html>

Select All rows for Kendo Grid in Virtual Scroll behaves weirdly

0 Answers