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