TreeViewComponent
Represents the Kendo UI TreeView component for Angular.
Selector
kendo-treeview
Export Name
Accessible in templates as #kendoTreeViewInstance="kendoTreeView"
Inputs
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.
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).
children
() => Observable<any[]>
A function which provides the child nodes for a given parent node (see example).
Events
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
EventEmitter<{ children: TreeItem[]; item: TreeItem; }>
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
EventEmitter<string>
Fires when the value of the built-in filter input element changes.
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 (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
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 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
asdataItem
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
- 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
asdataItem
param to target its page size.
Parameters
dataItem
any
The parent data item of the targeted collection.
pageSize
number
The new page size.