The TreeView allows the user to select a single node or multiple nodes by using node checkboxes.
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
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 is
CheckModeof the checkbox feature. The default value is
checkChildren—Determines if the children checkboxes will get selected when the user selects the parent checkbox. The default value is
checkParents—Determines if the parent checkbox will get selected when the user selects all its children checkboxes. The default value is
checkParentsis enabled, the TreeView displays the
indeterminatestate of the parent checkboxes too.
checkOnClick—Specifies if clicking the node will check or uncheck the item. The default value is
To enable the single check mode, use the
kendoTreeViewCheckable property which sets the
mode field to
The single check mode allows you to check items based on their:
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
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
The multiple check mode is enabled by default.
The multiple check mode allows you to check items based on their:
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.
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
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 custom
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 (
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.
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.
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
To display a checkbox next to each TreeView item, set the
checkboxes property to
The following example demonstrates how to implement a custom
The following example demonstrates how to use a more complex approach and implement a custom