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

Persisting the Disabled State

The TreeView enables you to define and persist the disabled state of its nodes when the component is re-rendered.

Basics

The TreeView determines the disabled state of its nodes by exposing the isDisabled function.

   import { Component } from '@angular/core';
   import { Observable, of } from 'rxjs';

   @Component({
       selector: 'my-app',
       template: `
       <kendo-treeview
           [isDisabled]="isDisabled" <-- this manages the nodes disabled state

           kendoTreeViewExpandable <-- this manages the expand collapse state

           [nodes]="data" <-- nodes are in the data field of the host component
           textField="text" <-- node's text field should be displayed

           [children]="fetchChildren"  <-- fetchChildren function will provide the child nodes
           [hasChildren]="hasChildren" <-- use fetchChildren function to check if node has children
           >
       </kendo-treeview>
   `
   })
   export class AppComponent {
       //A function that disables every item with a text field which equals to 'Decor'.
       public isDisabled = (dataItem: any) => {
           return dataItem.text === 'Decor';
       }

       public data: any[] = [{
               text: "Furniture", items: [
                   { text: "Tables & Chairs" },
                   { text: "Sofas" },
                   { text: "Occasional Furniture" }
               ]
           }, {
               text: "Decor", items: [
                   { text: "Bed Linen" },
                   { text: "Curtains & Blinds" },
                   { text: "Carpets" }
               ]
           }
       ];

       public fetchChildren(node: any): Observable<any[]> {
           //Return the node collection of the parent node as children.
           return of(node.items);
       }

       public hasChildren(node: any): boolean {
           //Check if the parent node has children.
           return node.items && node.items.length > 0;
       }
   }

Built-in Directives

To persist the disabled state of the TreeView, either:

Using the Built-In Directive

By default, the built-in DisableDirective persists the disabled items based on their hierarchical index.

Example
View Source
Change Theme:

Setting an Item Field

You can also persist the disabled state of the TreeView by item field—for example, the text field.

Example
View Source
Change Theme:

Disable Parent Nodes

By default, the TreeView component disables all child nodes of a disabled node. The component can be configured to disable parent nodes only without disabling its children by setting the disableParentNodesOnly field to true.

Example
View Source
Change Theme: