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-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