# Cell Selection

The [Angular TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist) provides the user with interaction options to apply:

<Row>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#single-cell-selection">
      <ComponentTitle>Single Cell Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Enable users to select one cell at a time using click or keyboard navigation.</ComponentDescription>
    </Component>
  </Column>
  <Column count={[24,24,12]} style={{marginBottom: "1rem"}}>
    <Component className="tile" href="#multiple-cells-selection">
      <ComponentTitle>Multiple Cells Selection</ComponentTitle>
      <ComponentDescription style={{padding: "0 10px 10px 10px"}}>Select multiple cells individually, in ranges, or with drag selection using keyboard modifiers.</ComponentDescription>
    </Component>
  </Column>
</Row>

The following example demonstrates the cell selection in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/selection/cell-selection/source.txt)

## Single Cell Selection

To select a cell in single selection mode, use one of the following actions:

* Click the cell.
* Press `Space` (available only when [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) is enabled).

To deselect a cell in single selection mode, use one of the following actions:

* Press and hold `Ctrl/Cmd(MacOS)`, then click the selected cell.
* Press `Ctrl + Space` or `Cmd + Enter` (MacOS) on the cell (available only when [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) is enabled).

> Clicking a selected cell will not deselect it.

The following example demonstrates how to select or deselect a single cell using the actions described above.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/selection/single-cell/source.txt)

## Multiple Cells Selection

The following table summarizes the available actions for selecting multiple cells in the TreeList:

| Action                           | Description                                                                                                      | Keyboard/Mouse Interaction                                                                                                                                                                                                                                                  | Requirements                                                                                                                                                 |
| -------------------------------- | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Select multiple cells one by one | Select cells individually without affecting other selected cells.                                                | • Press and hold `Ctrl/Cmd(MacOS)`, and click the desired cells.<br>• Navigate using the arrow keys and press `Ctrl + Space` or `Cmd + Enter` (MacOS) on the desired cells.                                                                                                 | Requires [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) for `Ctrl + Space` / `Cmd + Enter`. |
| Select a range of cells          | Select a continuous range of cells by defining a start and end point. Any new selection resets the previous one. | • Click and drag the rectangular selection over the desired cells.<br>• Press and hold `Shift` and click the cell you want to be the last in the range.<br>• Press `Space` to select a cell, then navigate using the arrow keys and press `Shift + Space` on the last cell. | Requires [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) for `Shift + Space`.                |
| Deselect a cell                  | Remove a specific cell from the selection.                                                                       | • Press and hold `Ctrl/Cmd(MacOS)`, then click the specific cell.<br>• Press `Ctrl + Space` or `Cmd + Enter` (MacOS) to deselect the active cell.                                                                                                                           | Requires [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) for `Ctrl + Space` / `Cmd + Enter`. |
| Leave only one cell selected     | Deselect all previously selected cells and keep only the current cell selected.                                  | • Click a cell within the TreeList.<br>• Press `Space` to select the active cell.                                                                                                                                                                                           | Requires [Keyboard Navigation](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/keyboard-navigation) for `Space`.                        |

> caution The [Checkbox Column](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/checkboxcolumncomponent) should not be used in cell selection mode.

The following example demonstrates how to select and deselect multiple cells using the actions described above.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/selection/multiple-cell/source.txt)

## Suggested Links

* [`SelectableDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectabledirective)
* [`SelectableSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/selectablesettings)
* [API Reference of the `TreeListComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui-develop/components/treelist/api)