Checkboxes
The TreeView allows the user to select a single node or multiple nodes by using node checkboxes.
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.
If you use a CheckableSettings
parameter, the TreeView enables you to specify the following options:
enabled
—Determines if the checkbox feature is initially enabled. The default value istrue
.mode
—Sets theCheckMode
of the checkbox feature. The default value ismultiple
.checkChildren
—Determines if the children checkboxes will get selected when the user selects the parent checkbox. The default value istrue
.checkParents
—Determines if the parent checkbox will get selected when the user selects all its children checkboxes. The default value istrue
. WhencheckParents
is enabled, the TreeView displays theindeterminate
state of the parent checkboxes too.checkOnClick
—Specifies if clicking the node will check or uncheck the item. 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 its unique text
field, use the checkedKeys
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 their unique text
fields, use the checkedKeys
property and pass a list of the checked data item field values.
If you use an item field or a callback function, the
indeterminate
state will not be displayed. To mark a particular item with indeterminate state, define a customisChecked
callback.
Check-All Feature
The CheckDirective
is designed to check all children nodes that are available in the TreeView. If the checked item has children which are not loaded yet, they will not appear in the checkedKeys
collection. Once the node is expanded, the children will be dynamically added.
Because the item indices are unavailable beforehand, the
checkedKeys
will be dynamically added when the nodes get expanded.
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.