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

Environment

Product

Progress® 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.

html

    <kendo-treeview
        (nodeClick)="handleNodeClick($event)"
    >
    </kendo-treeview>

typescript

  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);
    }
  }

2. Set the isSelected function to determine the selected items.

html

    <kendo-treeview
        [isSelected]="isNodeSelected"
    >
    </kendo-treeview>

typescript

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

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

Change Theme

Theme

Loading ...