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

Persist the Expanded State of the TreeView

Environment

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

Description

How can I persist the expanded state of nodes in a cookie in the Kendo UI for jQuery TreeView?

Solution

The following example demonstrates how to achieve this behavior and then restore the nodes upon refreshing the page in a TreeView.

  <div id="treeview"></div>
  <button onclick="reloadPage()">Reload Page</button>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js"></script>
  <script>
    function saveExpanded() {
      var treeview = $("#treeview").data("kendoTreeView");
      var expandedItemsIds = {};
      treeview.element.find(".k-item").each(function () {
        var item = treeview.dataItem(this);
        if (item.expanded) {
            expandedItemsIds[item.id] = true;
        }
      });
      Cookies.set('expanded', kendo.stringify(expandedItemsIds));
    }

    function setExpanded(data, expanded) {
      for (var i = 0; i < data.length; i++) {
        if (expanded[data[i].id]) {
          data[i].expanded = true;
        }
        if (data[i].items && data[i].items.length) {
          setExpanded(data[i].items, expanded);
        }
      }
    }

    function reloadPage() {
      saveExpanded();
      window.location.reload();
    }

    var data = [
      { id: 1, text: "Furniture", items: [
        { id: 2,text: "Tables & Chairs" },
        { id: 3,text: "Sofas" },
        { id: 4,text: "Occasional Furniture" }
      ] },
      { id: 5,text: "Decor", items: [
        { id: 6,text: "Bed Linen" },
        { id: 7,text: "Curtains & Blinds" },
        { id: 8,text: "Carpets" }
      ]}
    ];

    var expanded = Cookies.get('expanded');
    if (expanded) {
      Cookies.remove('expanded');
      expanded = JSON.parse(expanded);
      setExpanded(data, expanded);
    }

    var inlineDefault = new kendo.data.HierarchicalDataSource({
      data: data
    });

    $("#treeview").kendoTreeView({
      dataSource: inlineDefault
    });
  </script>

See Also

In this article