Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Resources
Productivity and Design Tools
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
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.