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

[Murilo]

Hi, 

 

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

[Hetali]

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