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

Programmatically Expanding and Collapsing Parent Nodes in the TreeView

Environment

Product

Progress® Kendo UI® for Angular TreeView

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:

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.
html
```
<kendo-treeview
    kendoTreeViewExpandable
    [expandBy]="'text'"
    ...
>
</kendo-treeview>
```

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.

public allParentNodes = [];

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

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.
ts
```
public expand() {
    this.expandedKeys = this.allParentNodes.slice();
}
```
To collapse the TreeView nodes, make sure that the array bound to the expandedKeys property is cleared.
ts
```
public 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.

Change Theme

Theme

Loading ...

Programmatically Expanding and Collapsing Parent Nodes in the TreeView

Environment

Description

Solution

Suggested Links