Checkboxes
The Angular TreeView by Kendo UI provides a built-in checkbox feature that allows users to select a single node or multiple nodes by using the node checkboxes.
The following example demonstrates the checkbox feature of the TreeView component.
Setup
To implement node checkboxes, apply the built-in CheckDirective directive. It accepts the kendoTreeViewCheckable property, which enables you to control the built-in checkbox behavior, and both boolean and CheckableSettings parameters.
The CheckableSettings parameter provides the following configuration options:
Common Options
The following options apply to both single and multiple selection modes:
enabled—Determines if the checkbox feature is initially enabled. The default value istrue.mode—Sets theCheckModeof the checkbox feature:single—Only one item can be checked at a time.multiple—Multiple items can be checked. This is the default value.
checkOnClick—Determines if clicking the node text toggles its checkbox. The default value isfalse.
Multiple Mode Options
The following options only apply when mode is set to multiple:
checkChildren—Determines if checking a parent node automatically checks all its child nodes. The default value istrue.checkParents—Determines if parent nodes display an indeterminate state when only some of their children are checked. The default value istrue.checkDisabledChildren—Determines if disabled child nodes are checked when their parent is checked. RequirescheckChildrento betrue. The default value isfalse.uncheckCollapsedChildren—Determines if collapsed child nodes are unchecked when their parent is unchecked. This option is relevant whenloadOnDemandistrue. The default value isfalse.
Modes
The CheckDirective provides the default TreeView implementation for the single check mode and the multiple check mode of items.
Single Check Mode
To enable the single check mode, use the kendoTreeViewCheckable property which sets the mode field to single.
The single check mode allows you to check items based on their:
Single Check by Hierarchical Index
The CheckDirective persists the checked state of the checkbox by utilizing the hierarchical index of the item. To select a specific TreeView item by its hierarchical index, use the checkedKeys property.
Single Check by Item Field
You can also persist the checked state of a single node by an item field—for example, a text field. To select a specific TreeView item by a unique field, use the checkBy property.
Multiple Check Mode
The multiple check mode is enabled by default.
The multiple check mode allows you to check items based on their:
Multiple Check by Hierarchical Index
The CheckDirective persists the checked state of the checkboxes by utilizing the hierarchical index of the items. To display initially checked TreeView items, use the checkedKeys property and pass a list of hierarchical indices.
Multiple Check by Item Field
Similar to the single check mode, you can also persist the checked state of multiple items by an item field—for example, a text field. To select specific TreeView items by a unique field, use the checkBy property.
If you use an item field or a callback function, the
indeterminatestate will not be displayed. To mark a particular item with indeterminate state, define a customisCheckedcallback.
Conditional Checkboxes
You can show the checkboxes for each node conditionally using the hasCheckbox function.
Checking Children
Depending on the TreeView loadOnDemand mode, the CheckDirective will add collapsed children keys to the checkedKeys collection either on node check ([loadOnDemand]="false"), or on node expand ([loadOnDemand]="true").
Lazily-Loaded Nodes
By default, the TreeView loadOnDemand property is set to true, so collapsed child node keys will only be added to the checkedKeys collection when their parent node is expanded and they are loaded.
Preloaded Nodes
When the loadOnDemand property is set to false, all child nodes, regardless of whether they are expanded or not, will be checked and added to the checkedKeys collection, as soon as their parent node is checked.
Modifying the Checked State
When the user selects an item by its checkbox, the TreeView emits the checkedChange event. The passed argument is of TreeItemLookup type and contains the following information:
item—The index and the data item of the affected TreeView item.parent—The parent TreeView item of the affected TreeView item.children—The children TreeView items of the affected TreeView item.
You can also render a specific checkbox as checked by collecting the provided information and using the isChecked property.
To display a checkbox next to each TreeView item, set the checkboxes property to true.
Custom Single-Check Directive
The following example demonstrates how to implement a custom single-check directive.
Custom Multi-Check Directive
The following example demonstrates how to use a more complex approach and implement a custom multi-check directive.