Components / TreeView

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.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Disabled keys: {{disabledKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewDisable
            [disabledKeys]="disabledKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public disabledKeys: any[] = ['0_2', '1'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.items);
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Setting an Item Field

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

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Disabled keys: {{disabledKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            [kendoTreeViewDisable]="'text'"
            [(disabledKeys)]="disabledKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public disabledKeys: any[] = ['Sofas', 'Occasional Furniture', 'Bed Linen'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.items);
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }


import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article