New to Kendo UI for jQuery? Download free 30-day trial

Persist Row Selection during Data Operations in the ListView

Environment

Product Progress Kendo UI ListView for jQuery
Operating System Windows 10 64bit
Visual Studio version Visual Studio 2017
Preferred Language JavaScript

Description

How can I persist the row selection of the ListView during data operations?

Solution

The following example demonstrates how to persist row selection during data operations in the ListView.

    <div id="listview"></div>

    <script>
      $(function () {
        var dataSource = new kendo.data.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
        });

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

        $("#listview").kendoListView({
          dataSource: dataSource,
          selectable: "multiple",
          pageable: true,
          template: "<div>#:ShipCity# || #:Freight# || #:kendo.toString(OrderDate, 'dd/MM/yyyy')#</div>",
          change: function (e, args) {
            var listview = e.sender;
            var items = listview.items();
            items.each(function (idx, row) {
              var idValue = listview.dataSource.getByUid(row.dataset.uid).get(idField);
              if (row.className.indexOf("k-state-selected") >= 0) {
                selectedOrders[idValue] = true;
              } else if (selectedOrders[idValue]) {
                delete selectedOrders[idValue];
              }
            });
          },
          dataBound: function (e) {
            var listview = e.sender;
            var items = listview.items();
            var itemsToSelect = [];
            items.each(function (idx, row) {
              var dataItem = listview.dataSource.getByUid(row.dataset.uid);
              if (selectedOrders[dataItem[idField]]) {
                itemsToSelect.push(row);
              }
            });

            listview.select(itemsToSelect);
          }
        });
      });
    </script>

See Also

In this article