Persist Row Selection during Data Operations

Important

Selection persistence is available out of the box as of 2017 R2. For more information check the persistSelection property.

The implemented technique requires you to define an ID field in schema.model.

Description

The following example demonstrates how to persist the row selection in a Grid while performing the paging, sorting, and filtering data operations with Kendo UI versions before 2017.2.504.

Example
    <div id="grid"></div>

    <script>

      $(function () {

        var selectedOrders = [];
        var idField = "OrderID";

        $("#grid").kendoGrid({
          dataSource: {
            type: "odata",
            transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
            },
            schema: {
              model: {
                id: "OrderID",
                fields: {
                  OrderID: { type: "number" },
                  Freight: { type: "number" },
                  ShipName: { type: "string" },
                  OrderDate: { type: "date" },
                  ShipCity: { type: "string" }
                }
              }
            },
            pageSize: 10,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true
          },
          height: 400,
          selectable: "multiple",
          pageable: {
            buttonCount: 5
          },
          sortable: true,
          filterable: true,
          navigatable: true,
          columns: [
            {
              field: "ShipCountry",
              title: "Ship Country",
              width: 300
            },
            {
              field: "Freight",
              width: 300
            },
            {
              field: "OrderDate",
              title: "Order Date",
              format: "{0:dd/MM/yyyy}"
            }
          ],
          change: function (e, args) {
            var grid = e.sender;
            var items = grid.items();
            items.each(function (idx, row) {
                var idValue = grid.dataItem(row).get(idField);
                if (row.className.indexOf("k-state-selected") >= 0) {
                    selectedOrders[idValue] = true;
                } else if (selectedOrders[idValue]) {
                    delete selectedOrders[idValue];
                }
            });
          },
          dataBound: function (e) {
            var grid = e.sender;
            var items = grid.items();
            var itemsToSelect = [];
            items.each(function (idx, row) {
              var dataItem = grid.dataItem(row);
              if (selectedOrders[dataItem[idField]]) {
                itemsToSelect.push(row);
              }
            });

            e.sender.select(itemsToSelect);
          }
        });
      });
    </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

In this article
Not finding the help you need? Improve this article