Angular TreeView Selection
The TreeView enables the user to select single or multiple nodes and persist the selection state.
To enable the selection, apply the built-in SelectDirective directive to the TreeView.
The directive expose the kendoTreeViewSelectable property, which enables you to control the built-in selection behavior, and both boolean and SelectableSettings parameters.
If you use a SelectableSettings parameter, the TreeView enables you to specify the following options:
enabled—Determines if the selection is initially enabled. The default value istrue.mode—Sets theSelectionModeof the selection. The default value issingle.
Persisting Single Selection
By default, the SelectDirective enables single selection mode, allowing only one item to be selected at a time. This approach provides you with full control over persisting the selection functionality—for example, it allows you to specify initially selected items and manually update the collection.
Using Hierarchical Index
By default, the SelectDirective persists the selected items by their hierarchical index. To display an initially selected TreeView item, use the selectedKeys property and pass the hierarchical index of the desired item.
The following example demonstrates the default behavior when the selection is enabled.
Using DataItem Field
To persist the selection by a specific item field—for example, the text field—use the selectBy property and set it to the field name. This approach is useful when you need to maintain selection across data operations such as filtering or sorting, as the hierarchical index may change but the unique field remains constant.
The following example demonstrates how to select a TreeView item by the text field.
Persisting Multiple Selection
To enable the multiple selection mode, set the kendoTreeViewSelectable property to a SelectableSettings object with the mode field set to multiple.
Using Hierarchical Index
By default, the SelectDirective persists the selected items by their hierarchical index. To display initially selected TreeView items, use the selectedKeys property and pass a list of hierarchical indices.
The following example demonstrates how to persist multiple selected items by their hierarchical index.
Using DataItem Field
To persist the multiple selection by an item field, use the selectBy property. This approach ensures that selected items remain selected even when the tree structure changes due to data operations.
The following example demonstrates how to select multiple TreeView items by the text field.
Modifying the Selection Behavior
When the user modifies the selection, the TreeView emits the selectionChange event. It contains the following information:
index—The hierarchical index of the affected TreeView item.dataItem—The data item of the selected TreeView item.
You can render a specific item as selected by collecting the provided information and using the isSelected callback that determines whether a given item is selected.