Cell Selection

The TreeList provides the user with interaction options to select:

• Single Cell Selection
• Multiple Cell Selection

The Checkbox Column must not be used in cell selection mode.

The following example demonstrates the cell selection in action.

Change Theme

Theme

Loading ...

Single Cell Selection Mode

To select a cell when the TreeList is in single selection mode:

• Click the cell, or
• Press Space (only when the Keyboard Navigation is enabled).

To deselect a cell when the TreeList is in single selection mode:

• Press and hold Ctrl, and click the selected cell, or
• Press Ctrl & Space / Cmd & Enter (MacOS) on the desired rows (only when the Keyboard Navigation is enabled).

If you click the selected cell, it will not be deselected.

Multiple Cell Selection Mode

To select multiple cells one by one when the TreeList is in multiple selection mode:

• Press and hold Ctrl, and click the desired cells, or
• Navigate using the arrow keys and press Ctrl & Space on the desired cells (only when the Keyboard Navigation is enabled).

To select a range of cells when the TreeList is in the multiple selection mode, either:

• Click and drag the rectangular selection over the desired cells, or
• Press and hold Shift and click the cell you want to be the last in the range. As a result, cells in the rectangular area between the initially selected cell and the last one are selected, or
• Select a cell by pressing Space, then navigate using the arrow keys and press Shift & Space on the cell you want to be the last in the selected range (only when the Keyboard Navigation is enabled).

To deselect one cell at a time, press and hold Ctrl and click the specific cell.

To leave only the current cell selected and deselect all previously selected cells:

• Click a cell within the TreeList, or
• Press Space to select the active cell (only when the Keyboard Navigation is enabled).

Suggested Links

• SelectableDirective
• SelectableSettings
• API Reference of the TreeListComponent
• API Index of the TreeList