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

Persist Selection Upon Retrieving New Data with Remotely Bound TreeList

Environment

Product Progress Kendo UI Grid
Operating System All
Browser All
Browser Version All

Description

How can I persist the selected rows of Kendo UI TreeList for jQuery bound to a remote data source after new data is retrieved upon expanding rows?

Solution

Store the ids of the selected items whenever the user selects a row and then within the dataBound event handler restore the selected rows.

      <div id="treelist"></div>
      <script>
        $(document).ready(function () {
          var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service";

          var dataSource = new kendo.data.TreeListDataSource({
            transport: {
              read: {
                url: crudServiceBaseUrl + "/EmployeeDirectory",
                dataType: "jsonp"
              }
            },
            schema: {
              model: {
                id: "EmployeeId",
                parentId: "ReportsTo",
                fields: {
                  EmployeeId: { type: "number", nullable: false },
                  ReportsTo: { field: "ReportsTo", nullable: true }
                }
              }
            }
          });

          $("#treelist").kendoTreeList({
            dataSource: dataSource,
            columns: [
              { selectable: true, width: "65px" },
              { field: "FirstName", expandable: true, title: "First Name", width: 250 },
              { field: "LastName", title: "Last Name" },
              { field: "Position" },
              { field: "Extension", title: "Ext", format: "{0:#}" }
            ],
            dataBound: function () {
              var that = this;
              if (that._selectedIds) {
                var selector = "";
                that._selectedIds.forEach(function (x, i) {
                  if (i > 0) {
                    selector += ", "
                  }
                  selector += '[data-uid="' + that.dataSource.get(x).uid + '"]'
                })
                that.select($(selector))
              }
            }
          }).on('click', 'input', function () {
            var that = $('#treelist').data('kendoTreeList');
            that._selectedIds = [];

            that.select().each(function () {
              that._selectedIds.push(that.dataItem($(this)).EmployeeId)
            })
          });
        });
      </script>

See Also

In this article