How can we expand all nodes of kendo treeview in angular?

1 Answer 366 Views
TreeView
Deepali
Top achievements
Rank 1
Deepali asked on 21 May 2021, 09:56 AM

Hi

How can we expand all nodes of kendo treeview in angular on the click of a button? Any help would be appreciated.

 

Thank You

 

 

1 Answer, 1 is accepted

Sort by
0
Hetali
Telerik team
answered on 25 May 2021, 09:55 PM

Hello Deepali,

In order to expand all the nodes of the Kendo UI TreeView on button click, assign all the parent nodes to the expandedKeys property of the kendoTreeViewExpandable directive. For example:

<kendo-treeview
  [nodes]="data"
  [expandBy]="'text'"
  [(expandedKeys)]="expandedKeys"
>
</kendo-treeview>

public allParentNodes = [];
public expandedKeys: any[] = this.allParentNodes.slice();

ngOnInit(){
  this.getAllParentTextProperties(this.data);
}

public expandNodes() {
  this.expandedKeys = this.allParentNodes.slice();
}

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

Similarly, by assigning an empty array to the expandedKeys, you can also collapse all the nodes on button click.

In this StackBlitz example, all the nodes of the TreeView can be expanded or collapsed on button click. 

Regards,
Hetali
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Deepali
Top achievements
Rank 1
commented on 26 May 2021, 06:23 PM

Thank you so much. I was able to collapse by emptying it but not expand
Tags
TreeView
Asked by
Deepali
Top achievements
Rank 1
Answers by
Hetali
Telerik team
Share this question
or