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

Programmatically Expanding and Collapsing Parent Nodes in the TreeView


ProductProgress® Kendo UI® for Angular TreeView


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


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.

  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.

    public allParentNodes = [];
    getAllParentTextProperties(items: Array<any>) {
        items.forEach((i) => {
        if (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.

    public expand() {
        this.expandedKeys = this.allParentNodes.slice();
  4. To collapse the TreeView nodes, make sure that the array bound to the expandedKeys property is cleared.

    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.

View Source
Change Theme:

In this article

Not finding the help you need?