New to Kendo UI for Angular? Start a free 30-day trial
Cell Selection
The Angular Grid provides the user with interaction options to apply:
The following example demonstrates the cell selection in action.
Change Theme
Theme
Loading ...
Single Cell Selection
To select a cell in single selection mode, use one of the following actions:
- Click the cell.
- Press
Enteron the cell (available only when 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/Cmd(MacOS) + Enteron the cell (available only when 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.
Change Theme
Theme
Loading ...
Multiple Cells Selection
The following table summarizes the available actions for selecting multiple cells in the Grid:
| 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.• Navigate using the arrow keys and press Ctrl/Cmd(MacOS) + Enter on the desired cells. | Requires Keyboard Navigation for Ctrl/Cmd(MacOS) + 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 (only when drag selection is enabled). • Press and hold Shift and click the cell you want to be the last in the range.• Select a cell by pressing Enter, then navigate using the arrow keys and press Shift + Enter on the last cell in the range. | Requires Keyboard Navigation for Shift + Enter. |
| Persist multiple ranges | Select multiple ranges of cells without resetting previous selections. | • Press and hold Ctrl/Cmd(MacOS) while clicking and dragging the rectangular selection.• Select a cell, then press and hold Shift and click the last cell in the range. Press and hold Ctrl/Cmd(MacOS) and repeat for a new range.• Press Enter to select a cell, navigate with arrow keys, and press Shift + Enter on the last cell in the range. Press and hold Ctrl/Cmd(MacOS) and repeat for a new range. | Requires multipleRanges to be set to true.Requires Keyboard Navigation for Shift + Enter. |
| Deselect a cell | Remove a specific cell from the selection. | • Press and hold Ctrl/Cmd(MacOS), then click the specific cell.• Press Ctrl/Cmd(MacOS) + Enter to deselect the active cell. | Requires Keyboard Navigation for Ctrl/Cmd(MacOS) + Enter. |
| Leave only one cell selected | Deselect all previously selected cells and keep only the current cell selected. | • Click a cell within the Grid. • Press Enter to select the active cell. | Requires Keyboard Navigation for Enter. |
The Checkbox Column should not be used in cell selection mode.
The following example demonstrates how to select and deselect multiple rows using the action described above.
Change Theme
Theme
Loading ...