Programmatically Expanding and Collapsing Parent Nodes in the TreeView

Environment

Description

How can I programmatically expand and collapse the parent nodes inside the Kendo UI for Angular TreeView component?

Solution

To programmatically expand or collapse all parent nodes in the Kendo UI for Angular TreeView component:

1. Use the built-in ExpandDirective and its expandBy property to determine the item key that will be used for the expanding and collapsing the TreeView nodes.

   Copy Code<kendo-treeview
       kendoTreeViewExpandable
       [expandBy]="'text'"
       ...
   >
   </kendo-treeview>

2. Manipulate the initial array with the data items to get all parent records and store the attribute that will be used for expanding and collapsing in a separate collection.

   Copy Codepublic allParentNodes = [];
   
   getAllParentTextProperties(items: Array<any>) {
       items.forEach((i) => {
       if (i.items) {
           this.allParentNodes.push(i.text);
           this.getAllParentTextProperties(i.items);
       }
       });
   }

3. To programmatically expand the parent nodes of the TreeView, use the built-in expandedKeys property and bind it to the collection that stores the parent nodes.

   Copy Codepublic expand() {
       this.expandedKeys = this.allParentNodes.slice();
   }

4. To collapse the TreeView nodes, make sure that the array bound to the expandedKeys property is cleared.

   Copy Codepublic collapse() {
       this.expandedKeys = [];
   }

The following example demonstrates how to implement the suggested approach and programmatically expand or collapse the parent nodes inside the TreeView component.

Suggested Links

• TreeView Overview
• API Reference of the TreeView
• Disabling parent nodes selection
• Inline Editing of TreeView nodes
• Hiding First-Level Checkboxes