New to Kendo UI for Angular? Start a free 30-day trial

TreeViewComponent

Represents the Kendo UI TreeView component for Angular.

html

<kendo-treeview
   kendoTreeViewExpandable
   [nodes]="data"
   textField="text"
   [children]="fetchChildren"
   [hasChildren]="hasChildren">
</kendo-treeview>

Selector

kendo-treeview

Export Name

Accessible in templates as #kendoTreeViewInstance="kendoTreeView"

Inputs

Name	Type	Default	Description
animate	`boolean`		Enables or disables content animation.
children	`(item: object) => Observable<object[]>`		A function that 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`	Allows expanding disabled nodes.
filter	`string`		Sets the initial value of the built-in filter input.
filterable	`boolean`	`false`	Renders the built-in input element for filtering. If `true`, emits the `filterChange` event that can be handled for manual filtering. Built-in filtering is available with `kendoTreeViewHierarchyBinding` and `kendoTreeViewFlatDataBinding` directives.
filterInputPlaceholder	`string`		Sets the placeholder text for the filter input when the component is empty.
hasCheckbox	`(item: object, index: string) => boolean`		A function that determines if a node has a checkbox. If there is no checkbox, the node is not checkable and is excluded from built-in check functionality.
hasChildren	`(item: object) => boolean`		A function that determines if a node has child nodes (see example).
isChecked	`(item: object, index: string) => CheckedState`		A function that determines if a node is checked (see example).
isDisabled	`(item: object, index: string) => boolean`		A function that determines if a node is disabled.
isExpanded	`(item: object, index: string) => boolean`		A function that determines if a node is expanded.
isSelected	`(item: object, index: string) => boolean`		A function that determines if a node is selected (see example).
isVisible	`(item: object, index: string) => boolean`		A callback that determines whether a TreeView node should be rendered as hidden. Uses the `.k-hidden` utility class. Useful for custom filtering.
loadOnDemand	`boolean`	`true`	Indicates whether child nodes are fetched on expand or initally prefetched.
navigable	`boolean`	`true`	Enables keyboard navigation for the TreeView.
nodes	`any[]`		The nodes displayed by the TreeView (see example).
size	`TreeViewSize`	`'medium'`	Sets the size of the component.
textField	`string \| string[]`		The fields of the data item that provide the text content of the nodes (see example). If set to an array, each level uses the field at the same index 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.

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 a TreeView node checkbox is selected (see example).
childrenLoaded	`EventEmitter<{ children: TreeItem[]; item: TreeItem; }>`	Fires when the children of the expanded node are loaded.
collapse	`EventEmitter<TreeItem>`	Fires when a TreeView node collapses.
expand	`EventEmitter<TreeItem>`	Fires when a TreeView node expands.
filterChange	`EventEmitter<string>`	Fires when the value of the built-in filter input changes.
filterStateChange	`EventEmitter<FilterState>`	Emits when the built-in filtering mechanism updates node visibility. Used for the built-in auto-expand functionalities. Handle this event for custom implementations.
nodeClick	`EventEmitter<NodeClickEvent>`	Fires when a TreeView node is clicked.
nodeDblClick	`EventEmitter<NodeClickEvent>`	Fires when a TreeView node is double-clicked.
nodeDrag	`EventEmitter<TreeItemDragEvent>`	Fires when an item is being dragged (see example).
nodeDragEnd	`EventEmitter<TreeItemDragEvent>`	Fires on the source TreeView after the dragged item is dropped (see example).
nodeDragStart	`EventEmitter<TreeItemDragStartEvent>`	Fires just before node dragging starts (see example). This event is preventable. Prevent the default event to stop drag hint creation and further drag events.
nodeDrop	`EventEmitter<TreeItemDropEvent>`	Fires on the target TreeView when a dragged item is dropped (see example). Prevent the default event (`event.preventDefault()`) or set the event as invalid (`event.setValid(false)`) to stop the `addItem` and `removeItem` events from triggering. Use `preventDefault` to handle add/remove manually, or `setValid(false)` to indicate an unsuccessful operation. While `setValid(false)` animates the drag clue to its original position, `event.preventDefault()` simply removes the clue.
blur	`EventEmitter<any>`	Fires when the component loses focus.
focus	`EventEmitter<any>`	Fires when the component receives focus.
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 a TreeView node is selected (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 shows its loading indicator.

Parameters
item	`any`
index	`string`

focus

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

Parameters
index?	`string`

getNodePageSize

Gets the current page size of the data item's children collection (see example). Pass null as dataItem to get the root collection's page size.

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

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

itemLookup

Returns the TreeItemLookup node for the specified index.

Parameters
index	`string`	The index of the node.

Returns
`TreeItemLookup`	The looked up item.

rebindChildren
Calls the `children` function for every expanded node and fetches all rendered child nodes again.

setNodePageSize

Sets the page size of the data item's children collection (see example). Pass null as dataItem to set the root collection's page size.

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