New to Kendo UI for Angular? Start a free 30-day trial

Disable the parent nodes selection of the Kendo UI for Angular TreeView.

Environment

ProductProgress® Kendo UI for Angular TreeView

Description

How can I disable the selection only for the parent nodes of the Kendo UI for Angular TreeView and keep their expandable functionality?

Solution

  1. Persist the selection manually by handling the nodeClick event.
    <kendo-treeview
        (nodeClick)="handleNodeClick($event)"
    >
    </kendo-treeview>
  public selectedKeys: Set<number> = new Set();

  public isNodeSelected = dataItem => this.selectedKeys.has(dataItem.id);

  public hasChildren = dataItem =>
    Array.isArray(dataItem.items) && dataItem.items.length > 0;

  public handleNodeClick(event: NodeClickEvent): void {
    const dataItem = event.item.dataItem;

    if (!this.hasChildren(dataItem) && !this.isNodeSelected(dataItem)) {
      this.selectedKeys.add(dataItem.id);
    } else {
      this.selectedKeys.delete(dataItem.id);
    }
  }
  1. Set the isSelected function to determine the selected items.
    <kendo-treeview
        [isSelected]="isNodeSelected"
    >
    </kendo-treeview>
    public isNodeSelected = dataItem => this.selectedKeys.has(dataItem.id);

The following example shows the full implementation of the demonstrated approach.

Example
View Source
Change Theme:

In this article

Not finding the help you need?