This is a migrated thread and some comments may be shown as answers.

How do I expand a list of items when I click on the node?

1 Answer 9 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Murilo
Top achievements
Rank 1
Veteran
Murilo asked on 28 Jan 2021, 05:09 PM

Hi, 

 

I need to expand the list of items by clicking on the node, like clicking on the icon (example.png).

1 Answer, 1 is accepted

Sort by
0
Accepted
Hetali
Telerik team
answered on 28 Jan 2021, 11:05 PM

Hello Murilo,

In order to expand the node when you click on it in the Kendo UI Treeview, use the expandNode method in the nodeClick event. You can also use the collapseNode method to collapse the expanded node based on the isExpanded value. For example:

<kendo-treeview
  #treeview
  [nodes]="data"
  kendoTreeViewExpandable
  (nodeClick)="nodeClick($event)"
  [isExpanded]="isItemExpanded"
  [expandedKeys]="expandedKeys">
</kendo-treeview>

@ViewChild("treeview", { static: false }) public treeview;
public expandedKeys: any[] = ["0"];
public isItemExpanded = (_: any, index: string) => this.expandedKeys.indexOf(index) > -1;

public nodeClick(e) {
  var item = e.item.dataItem;
  var index = e.item.index;
  if (this.isItemExpanded(item, index)) {
    this.treeview.collapseNode(item, index);
  } else {
    this.treeview.expandNode(item, index);
  }
}

In this StackBlitz example, the Kendo UI TreeView nodes expand and collapse when you click on the node.

I hope this helps Please let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeView
Asked by
Murilo
Top achievements
Rank 1
Veteran
Answers by
Hetali
Telerik team
Share this question
or