TreeViewComponent
Represents the Kendo UI TreeView component for Angular.
Selector
kendo-treeview
Export Name
Accessible in templates as #kendoTreeViewInstance="kendoTreeView"
Inputs
Name | Type | Default | Description |
---|---|---|---|
animate |
|
Determines whether the content animation is enabled. | |
children |
|
A function which provides the child nodes for a given parent node (see example). | |
disableParentNodesOnly |
|
|
Indicates whether only parent nodes should be disabled or their child nodes as well |
expandDisabledNodes |
|
|
Determines whether to allow expanding disabled nodes. |
filter |
|
Sets an initial value of the built-in input element used for filtering. | |
filterable |
|
Renders the built-in input element for filtering the TreeView.
If set to | |
filterInputPlaceholder |
|
The hint which is displayed when the component is empty. | |
hasCheckbox |
|
A function which determines if a specific node has a checkbox.
| |
hasChildren |
|
A function which determines if a specific node has child nodes (see example). | |
isChecked |
|
A function which determines if a specific node is checked (see example). | |
isDisabled |
|
A function which determines if a specific node is disabled. | |
isExpanded |
|
A function which determines if a specific node is expanded. | |
isSelected |
|
A function which determines if a specific node is selected (see example). | |
isVisible |
|
A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes. Useful for custom filtering implementations. | |
loadOnDemand |
|
|
Indicates whether the child nodes will be fetched on node expand or will be initially prefetched. |
navigable |
|
Determines whether the TreeView keyboard navigable is enabled. | |
nodes |
|
The nodes which will be displayed by the TreeView (see example). | |
size |
|
Sets the size of the component. The possible values are:
| |
textField |
|
The fields of the data item that provide the text content of the nodes
(see example). If the | |
trackBy |
|
A function that defines how to track node changes. By default, the TreeView tracks the nodes by data item object reference. ts
|
Events
Name | Type | Description |
---|---|---|
addItem |
|
Fires after a dragged item is dropped (see example). Called on the TreeView where the item is dropped. |
checkedChange |
|
Fires when the user selects a TreeView node checkbox (see example). |
childrenLoaded |
|
Fires when the children of the expanded node are loaded. |
collapse |
|
Fires when the user collapses a TreeView node. |
expand |
|
Fires when the user expands a TreeView node. |
filterChange |
|
Fires when the value of the built-in filter input element changes. |
filterStateChange |
|
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 |
|
Fires when the user clicks a TreeView node. |
nodeDblClick |
|
Fires when the user double clicks a TreeView node. |
nodeDrag |
|
Fires when an item is being dragged (see example). |
nodeDragEnd |
|
Fires on the source TreeView after the dragged item has been dropped (see example). |
nodeDragStart |
|
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 |
|
Fires on the target TreeView when a dragged item is dropped (see example).
This event is preventable. If you prevent the event default ( Both operations cancel the default drop operation, but the indication to the user is different. |
blur |
|
Fires when the user blurs the component. |
focus |
|
Fires when the user focuses the component. |
removeItem |
|
Fires after a dragged item is dropped (see example). Called on the TreeView from where the item is dragged. |
selectionChange |
|
Fires when the user selects a TreeView node (see example). |
Methods
blur |
---|
Blurs the focused TreeView item. |
collapseNode | |||||||||
---|---|---|---|---|---|---|---|---|---|
Triggers the | |||||||||
|
expandNode | |||||||||
---|---|---|---|---|---|---|---|---|---|
Triggers the | |||||||||
|
focus | ||||||
---|---|---|---|---|---|---|
Focuses the first focusable item in the TreeView component if no hierarchical index is provided. ts
| ||||||
|
getNodePageSize | ||||||
---|---|---|---|---|---|---|
Gets the current page size of the checked data item children collection (see example).
| ||||||
| ||||||
|
itemLookup | ||||||
---|---|---|---|---|---|---|
Based on the specified index, returns the TreeItemLookup node. | ||||||
| ||||||
|
rebindChildren |
---|
Triggers the |
setNodePageSize | |||||||||
---|---|---|---|---|---|---|---|---|---|
Sets the page size of the targeted data item children collection (see example).
| |||||||||
|