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

[Deepali]

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

 

 

[Hetali]

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

[Deepali]

Thank you so much. I was able to collapse by emptying it but not expand