Name	Type	Default	Description
children	`(item: object) => Observable<object[]>`		A function which provides the child nodes for a given parent node (see example).
disableParentNodesOnly	`boolean`	`false`	Indicates whether only parent nodes should be disabled or their child nodes as well
expandDisabledNodes	`boolean`	`false`	Determines whether to allow expanding disabled nodes.
filter	`string`		Sets an initial value of the built-in input element used for filtering.
filterInputPlaceholder	`string`		The hint which is displayed when the component is empty.
filterable	`boolean`		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`	`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` `none`

Events

Name	Type	Description
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.
blur	`EventEmitter<any>`	Fires when the user blurs the component.
focus	`EventEmitter<any>`	Fires when the user focuses the component.
removeItem	`EventEmitter<TreeItemAddRemoveArgs>`	Fires after a dragged item is dropped (see example). Called on the TreeView from where the item is dragged.
selectionChange	`EventEmitter<TreeItem>`	Fires when the user selects a TreeView node (see example).

Methods

blur
Blurs the focused TreeView item.

collapseNode

Triggers the collapse event for the provided node.

Parameters
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" }
     ];
 }

Parameters
index?	`string`

getNodePageSize

Gets the current page size of the checked data item children collection (see example).

Since the root nodes collection is not associated with any parent data item, pass null as dataItem param to get its page size.

Parameters
dataItem	`any`	The parent data item of the targeted collection.

Returns
`number`	The page size of the checked data item children collection.

itemLookup

Based on the specified index, returns the TreeItemLookup node.

Parameters
index	`string`	The index of the node.

Returns
`TreeItemLookup`	The item that was searched (looked up).

rebindChildren
Triggers the `children` function for every expanded node, causing all rendered child nodes to be fetched again.

setNodePageSize

Sets the page size of the targeted data item children collection (see example).

Since the root nodes collection is not associated with any parent data item, pass null as dataItem param to target its page size.

Parameters
dataItem	`any`	The parent data item of the targeted collection.
pageSize	`number`	The new page size.

TreeViewComponent

In this article

Not finding the help you need?

Getting Started

Support Resources

Community