Renders the built-in input element for filtering the TreeView. If set to true, the component emits the filterChange event, which can be used to filter the TreeView manually. A built-in filtering implementation is available to use with the kendoTreeViewHierarchyBinding and kendoTreeViewFlatDataBinding directives.

isDisabled

(item: object, index: string) => boolean

A function which determines if a specific node is disabled.

isVisible

(item: object, index: string) => boolean

A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-display-none class is used to hide the nodes. Useful for custom filtering implementations.

loadOnDemand

boolean

(default: true) Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.

navigable

boolean

Determines whether the TreeView keyboard navigable is enabled.

textField

string | string[]

The fields of the data item that provide the text content of the nodes (see example). If the textField input is set to an array, each hierarchical level uses the field that corresponds to the same index in the array, or the last item in the array.

trackBy

TrackByFunction<object>

A function that defines how to track node changes. By default, the TreeView tracks the nodes by data item object reference.

 @Component({
     selector: 'my-app',
     template: `
         <kendo-treeview
             [nodes]="data"
             textField="text"
             [trackBy]="trackBy"
         >
         </kendo-treeview>
     `
 })
 export class AppComponent {
     public data: any[] = [
         { text: "Furniture" },
         { text: "Decor" }
     ];

     public trackBy(index: number, item: any): any {
         return item.text;
     }
 }

animate

boolean

Determines whether the content animation is enabled.

hasChildren

(item: object) => boolean

A function which determines if a specific node has child nodes (see example).

isChecked

(item: object, index: string) => CheckedState

A function which determines if a specific node is checked (see example).

isExpanded

(item: object, index: string) => boolean

A function which determines if a specific node is expanded.

isSelected

(item: object, index: string) => boolean

A function which determines if a specific node is selected (see example).

nodes

any[]

The nodes which will be displayed by the TreeView (see example).

size

TreeViewSize

Sets the size of the component.

The possible values are:

'small'
'medium' (default)
'large'
null

children

() => Observable<any[]>

A function which provides the child nodes for a given parent node (see example).

Events

addItem

EventEmitter<TreeItemAddRemoveArgs>

Fires after a dragged item is dropped (see example). Called on the TreeView where the item is dropped.

checkedChange

EventEmitter<TreeItemLookup>

Fires when the user selects a TreeView node checkbox (see example).

childrenLoaded

EventEmitter<{ children: TreeItem[]; item: TreeItem; }>

Fires when the children of the expanded node are loaded.

collapse

EventEmitter<TreeItem>

Fires when the user collapses a TreeView node.

expand

EventEmitter<TreeItem>

Fires when the user expands a TreeView node.

filterChange

EventEmitter<string>

Fires when the value of the built-in filter input element changes.

filterStateChange

EventEmitter<FilterState>

Emits when the built-in filtering mechanism in the data-binding directives updates the node's visibility. Used for the built-in auto-expand functionalities of the component and available for custom implementations.

nodeClick

EventEmitter<NodeClickEvent>

Fires when the user clicks a TreeView node.

nodeDblClick

EventEmitter<NodeClickEvent>

Fires when the user double clicks a TreeView node.

nodeDrag

EventEmitter<TreeItemDragEvent>

Fires when an item is being dragged (see example).

nodeDragEnd

EventEmitter<TreeItemDragEvent>

Fires on the source TreeView after the dragged item has been dropped (see example).

nodeDragStart

EventEmitter<TreeItemDragStartEvent>

Fires just before the dragging of the node starts (see example). This event is preventable. If you prevent the event default, no drag hint will be created and the subsequent drag-related events will not be fired.

nodeDrop

EventEmitter<TreeItemDropEvent>

Fires on the target TreeView when a dragged item is dropped (see example). This event is preventable. If you prevent the event default (event.preventDefualt()) or invalidate its state (event.setValid(false)), the addItem and removeItem events will not be triggered.

Both operations cancel the default drop operation, but the indication to the user is different. event.setValid(false) indicates that the operation was unsuccessful by animating the drag clue to its original position. event.preventDefault() simply removes the clue, as if it has been dropped successfully. As a general rule, use preventDefault to manually handle the add and remove operations, and setValid(false) to indicate the operation was unsuccessful.

item

any

index

string

expandNode

Triggers the expand event for the provided node and displays it's loading indicator.

Parameters

item

any

index

string

focus

Focuses the first focusable item in the TreeView component if no hierarchical index is provided.

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

 @Component({
     selector: 'my-app',
     template: `
     <button (click)="treeview.focus('1')">Focuses the second node</button>
     <kendo-treeview
         #treeview
         [nodes]="data"
         textField="text"
     >
     </kendo-treeview>
 `
 })
 export class AppComponent {
     public data: any[] = [
         { text: "Furniture" },
         { text: "Decor" }
     ];
 }