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

Expand and Collapse All Nodes in the TreeList

Updated on Nov 2, 2026

Environment

Product	Progress® Kendo UI® TreeList for jQuery
Version	2026.4.1111

Description

How can I expand all nodes of the Kendo UI for jQuery TreeList, including the nested levels, when the TreeList loads and from a button in its toolbar? How can I collapse all nodes again?

This KB also answers the following questions:

Is there a method that expands the whole TreeList hierarchy at once?
How can I add an expand all button to the TreeList toolbar?

Solution

The TreeList expand and collapse methods work with a single row. The TreeList does not provide a method that expands or collapses the whole hierarchy at once.

Expand All Nodes on Initial Load

Set the expanded field of every data item that has children to true. The TreeList renders these items expanded.

Expand or Collapse All Nodes on Demand

To expand or collapse all nodes after the TreeList is rendered, use the following approach:

Add buttons to the toolbar of the TreeList.
In the click handler of a button, get the TreeList items by using the items method and keep the ones whose data item has children and is not in the requested state.
Call expand or collapse for one of these rows and repeat until no such rows remain. The TreeList re-renders after each call, so the remaining rows are determined again on every pass, and the nested levels are included.

The example binds the TreeList to local data. For remote data binding, the children load when a node is expanded, and the expand method returns a promise that is resolved once the data is loaded.

The following example demonstrates how to expand and collapse all nodes from the TreeList toolbar. The second TreeList expands all nodes on initial load.

<div id="treeList"></div>
<div id="treeList2"></div>
<script>
  function toggleAll(treeList, expand) {
    var pending = treeList.items().filter(function() {
      var dataItem = treeList.dataItem(this);
      return dataItem.hasChildren && dataItem.expanded !== expand;
    });

    if (pending.length) {
      if (expand) {
        treeList.expand(pending.first());
      } else {
        treeList.collapse(pending.last());
      }
      toggleAll(treeList, expand);
    }
  }

  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    toolbar: "<button id='expandAll' class='k-button'>Expand all</button><button id='collapseAll' class='k-button'>Collapse all</button>",
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", age: 22 },
      { id: 2, parentId: 1, name: "John Doe", age: 24 },
      { id: 3, parentId: 1, name: "Jenny Doe", age: 3 },
      { id: 4, parentId: 2, name: "test user", age: 34 },
      { id: 5, parentId: null, name: "User1", age: 24 },
      { id: 6, parentId: 5, name: "User2", age: 13 },
      { id: 7, parentId: 6, name: "User4", age: 30 }
    ]
  });

  $("#treeList").on("click", "#expandAll", function() {
    toggleAll($("#treeList").data("kendoTreeList"), true);
  });

  $("#treeList").on("click", "#collapseAll", function() {
    toggleAll($("#treeList").data("kendoTreeList"), false);
  });

  $("#treeList2").kendoTreeList({
    columns: [
      { field: "name" }
    ],
    dataSource: [
      { id: 1, parentId: null, name: "Jane Doe", expanded: true },
      { id: 2, parentId: 1, name: "John Doe", expanded: true },
      { id: 4, parentId: 2, name: "test user" },
      { id: 5, parentId: null, name: "User1", expanded: true },
      { id: 6, parentId: 5, name: "User2", expanded: true },
      { id: 7, parentId: 6, name: "User4" }
    ]
  });
</script>