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