# 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 `CheckDirective` supports configurable `CheckableSettings`, allowing you to switch between `single` and `multiple` check modes and control behaviors such as check-on-click and cascading selection across parent and child nodes.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/basic/source.txt)

## Setup

To implement node checkboxes, apply the built-in [`CheckDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective) directive. It accepts the [`kendoTreeViewCheckable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective#kendotreeviewcheckable) property, which enables you to control the built-in checkbox behavior, and both `boolean` and [`CheckableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings) parameters.

The [`CheckableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings) parameter provides the following configuration options:

### Common Options

The following options apply to both single and multiple selection modes:

* [`enabled`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#enabled)—Determines if the checkbox feature is initially enabled. The default value is `true`.
* [`mode`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#mode)—Sets the [`CheckMode`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkmode) of 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#checkonclick)—Determines if clicking the node text toggles its checkbox. The default value is `false`.

### Multiple Mode Options

The following options only apply when [`mode`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#mode) is set to `multiple`:

* [`checkChildren`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#checkchildren)—Determines if checking a parent node automatically checks all its child nodes. The default value is `true`.
* [`checkParents`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#checkparents)—Determines if parent nodes display an indeterminate state when only some of their children are checked. The default value is `true`.
* [`checkDisabledChildren`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#checkdisabledchildren)—Determines if disabled child nodes are checked when their parent is checked. Requires [`checkChildren`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#checkchildren) to be `true`. The default value is `false`.
* [`uncheckCollapsedChildren`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings#uncheckcollapsedchildren)—Determines if collapsed child nodes are unchecked when their parent is unchecked. This option is relevant when [`loadOnDemand`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#loadondemand) is `true`. The default value is `false`.

## Modes

The [`CheckDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective) provides the default TreeView implementation for the [single check mode](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#single-check-mode) and the [multiple check mode](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#multiple-check-mode) of items.

### Single Check Mode

To enable the single check mode, use the [`kendoTreeViewCheckable`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkablesettings) property which sets the `mode` field to `single`.

The single check mode allows you to check items based on their:

* [Hierarchical index](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#single-check-by-hierarchical-index)
* [Item field](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#single-check-by-item-field)

#### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective#checkedkeys) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/single-check/source.txt)

#### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective#checkby) property.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/single-check-by-id/source.txt)

### Multiple Check Mode

The multiple check mode is enabled by default.

The multiple check mode allows you to check items based on their:

* [Hierarchical index](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#multiple-check-by-hierarchical-index)
* [Item field](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#multiple-check-by-item-field)

#### Multiple Check by Hierarchical Index

The [`CheckDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective#checkedkeys) property and pass a list of hierarchical indices.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/multiple-check/source.txt)

#### 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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective#checkby) property.

> 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 custom `isChecked` callback.

The following example demonstrates how to persist multiple checked nodes by a unique item field using the `checkBy` property, keeping the checked state stable even when the tree structure changes.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/multiple-check-by-id/source.txt)

## Conditional Checkboxes

You can show the checkboxes for each node conditionally using the [`hasCheckbox`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#hascheckbox) function.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/conditional/source.txt)

## Checking Children

Depending on the TreeView [`loadOnDemand`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#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"`).

* [Using the directive with lazily-loaded nodes](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#lazily-loaded-nodes)
* [Using the directive with preloaded nodes](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/checkboxes#preloaded-nodes)

### Lazily-Loaded Nodes

By default, the TreeView [`loadOnDemand`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/checking-children/lazily-loaded-nodes/source.txt)

### Preloaded Nodes

When the [`loadOnDemand`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/checking-children/preloaded-nodes/source.txt)

## Modifying the Checked State

When the user selects an item by its checkbox, the TreeView emits the [`checkedChange`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#checkedchange) event. The passed argument is of [`TreeItemLookup`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeitemlookup) type and contains the following information:

* [`item`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/itemlookup#item)—The index and the data item of the affected TreeView item.
* [`parent`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/itemlookup#parent)—The parent TreeView item of the affected TreeView item.
* [`children`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/itemlookup#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`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#ischecked) property.

To display a checkbox next to each TreeView item, set the [`checkboxes`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent#checkedchange) property to `true`.

#### Custom Single-Check Directive

The following example demonstrates how to implement a custom `single-check` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/custom-check/source.txt)

#### Custom Multi-Check Directive

The following example demonstrates how to use a more complex approach and implement a custom `multi-check` directive.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treeview/checkable/custom-check-directive/source.txt)

## Suggested Links

* [Angular TreeView Homepage](https://www.telerik.com/kendo-angular-ui/treeview)
* [API Reference of the `CheckDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/checkdirective)
* [API Reference of the `TreeViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api/treeviewcomponent)
* [API Reference of the Angular TreeView](https://www.telerik.com/kendo-angular-ui-develop/components/treeview/api)