Row Selection
The Angular Grid provides the user with multiple interaction options to select rows, which are:
- Single Row Selection
- Multiple Rows Selection
- Checkboxes-Only Selection
- Select-All Checkbox
- Multiple Rows Selection without the Ctrl or Command Keys
- Disabling the Selection for Specific Rows
The following example demonstrates the row selection in action.
Single Row Selection
To select a row in single selection mode, use one of the following actions:
- Click the row.
- Select the row's checkbox.
- Press
Enteron the row (available only when Keyboard Navigation is enabled).
To deselect a row in single selection mode, use one of the following actions:
- Deselect the checkbox of the selected row.
- Press and hold
Ctrl/Cmd(MacOS), then click the selected row. - Press
Ctrl/Cmd(MacOS) + Enteron the row (available only when Keyboard Navigation is enabled).
Clicking a selected row will not deselect it.
The following example demonstrates how to select or deselect a single row using the actions described above.
Multiple Rows Selection
The following table summarizes the available actions for selecting multiple rows in the Grid:
| Action | Description | Keyboard/Mouse Interaction | Requirements |
|---|---|---|---|
| Select multiple rows one by one | Select rows individually without affecting other selected rows. | • Select the checkbox of each desired row. • Press and hold Ctrl/Cmd(MacOS), and click the desired rows.• Press Ctrl/Cmd(MacOS) + Enter on the desired rows. | Requires Keyboard Navigation for Ctrl/Cmd(MacOS) + Enter. |
| Select a range of rows | Select a continuous range of rows by defining a start and end point. Any new selection resets the previous one. | • Click and drag the rectangular selection over the desired rows. • Select a row, then press and hold Shift and click the last row in the range.• Press Enter to select a row, navigate with arrow keys, and press Shift + Enter on the last row. | • Drag selection requires the drag option.• Requires Keyboard Navigation for Shift + Enter. |
| Persist multiple range selection | Select multiple ranges of rows without resetting previous selections. | • Press Ctrl/Cmd(MacOS) while clicking and dragging the rectangular selection.• Select a row, then press and hold Shift and click the last row in the range. Press and hold Ctrl/Cmd(MacOS) and repeat for a new range.• Press Enter to select a row, navigate with arrow keys, and press Shift + Enter on the last row. Press and hold Ctrl/Cmd(MacOS) and repeat for a new range. | • Requires multipleRanges to be set to true.• Drag selection requires the drag option.• Requires Keyboard Navigation for Shift + Enter. |
| Deselect a row | Remove a specific row from the selection. | • Deselect the checkbox of the specific row. • Press and hold Ctrl/Cmd(MacOS), then click the specific row.• Press Ctrl/Cmd(MacOS) + Enter on the desired row. | Requires Keyboard Navigation for Ctrl/Cmd(MacOS) + Enter. |
| Leave only one row selected | Deselect all previously selected rows and keep only the current row selected. | • Click a row within the Grid. • Press Enter to select the active row. | Requires Keyboard Navigation for Enter. |
The following example demonstrates how to select and deselect multiple rows using the action described above.
Multiple Rows Selection without the Ctrl and Command Keys
To ensure its user-friendliness on mobile and touchscreen devices, the Grid exposes the metaKeyMultiSelect property which allows you to determine whether pressing the Ctrl or Command keys is required for the selection of multiple rows at the same time.
The following example demonstrates how to enable the multiple rows selection without using the Ctrl and Command keys.
Checkbox-Only Selection
You can combine the checkbox-only selection with the single or the multiple modes. To select or deselect a single or multiple rows when the checkbox-only selection is enabled, select the checkboxes of the desired rows. For more information on checkbox selection, refer to the SelectionCheckboxDirective of the Grid.
The checkbox selection is applicable to the row selection mode only, and is not compatible with the cell selection mode.
The following example demonstrates the checkbox-only option with multiple selection.
Select-All Checkbox
The Grid allows the selection or deselection of all items on a page through a select-all checkbox in its header. To enable the select-all feature, set the showSelectAll option of CheckboxColumnComponent to true. You can also manually add a select-all checkbox to a template by utilizing the SelectAllCheckboxDirective.
The select-all feature applies only to the items that are rendered on the current page. For more information on how to modify this behavior, refer to the section on persisting the selection.
The following example demonstrates how to apply the default behavior of the select-all checkbox and select all items on the page.
Disabling the Selection for Specific Rows
The Grid enables you to determine which of its rows can be selected depending on certain conditions. To programmatically specify the rows which can be selected, use the built-in isRowSelectable function. The callback is executed for all rows in the component and returns a boolean value which determines whether the row can be selected or not.
When the cell selection is enabled, the non-selectable rows are still respected and their cells cannot be selected.
To hide the checkboxes of the rows with disabled selection from the designated checkbox column, set the value of its showDisabledCheckbox property to false.
The following example demonstrates how to disable the selection of specific rows based on a given condition and hide their respective checkboxes.