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

Open Root Nodes of the TreeList

Environment

Product Version 2019.3.917
Product Progress® Kendo UI® TreeList for jQuery

Description

How can I expand all the root nodes of the Kendo UI TreeList when the component is loaded?

Solution

Use the rootNodes method to get the array of all the root nodes and perform the expand method on it. For example:

var treelist1 = $("#treeList").data("kendoTreeList");
var data = treelist1.dataSource.rootNodes();
for(let i = 0; i < data.length; i++){
  var row = treelist1.content.find("tr[data-uid=" + data[i].uid + "]")
  treelist1.expand(row);
}

Example

<div id="treeList"></div>
<script>
  $("#treeList").kendoTreeList({
    columns: [
      { field: "name" },
      { field: "age" }
    ],
    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 }
    ]
  });

  var treelist1 = $("#treeList").data("kendoTreeList");
  var data = treelist1.dataSource.rootNodes();
  for(let i = 0; i < data.length; i++){
    var row = treelist1.content.find("tr[data-uid=" + data[i].uid + "]")
    treelist1.expand(row);
  }
</script>

See Also

In this article