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.

Copy Code   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:

• Use the built-in DisableDirective, or
• Set an item field.

Using the Built-In Directive

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

Setting an Item Field

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

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.

Suggested Links

• API Reference of the TreeView