Row Selection
The 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 when the Grid is in single selection mode, use one of the following actions:
- Click the row.
- Select the checkbox of the row.
- Press
Enteron the row (only when Keyboard Navigation is enabled).
To deselect a row when the Grid is in single selection mode, use one of the following actions:
- Deselect the checkbox of the selected row.
- Press and hold
Ctrl, and click the selected row. - Press
Ctrl&Enteron the row (only when Keyboard Navigation is enabled).
If you click the selected row, it will not be deselected.
The following example demonstrates how to select or deselect a single row using the action described above.
Multiple Rows Selection
To select multiple rows one by one when the Grid is in multiple selection mode, use one of the following actions:
- Select the checkbox of each desired row.
- Press and hold
Ctrl, and click the desired rows. - Press
Ctrl&Enteron the desired rows (only when Keyboard Navigation is enabled). - Press
Shiftand use theUpandDownarrow keys to navigate to the desired rows (only when Keyboard Navigation is enabled).
To select a range of rows when the Grid is in the multiple selection mode, use one of the following actions:
- Click and drag the rectangular selection over the desired rows (only when the drag selection is enabled).
- Select a row through its checkbox or by clicking it, then press and hold
Shiftand click on the checkbox or the row you want to be the last in the selected range, or - Select a row by pressing
Enter, then navigate using the arrow keys and pressShift&Enteron the row you want to be the last in the selected range (only when Keyboard Navigation is enabled).
To deselect one row at a time, use one of the following actions:
- Deselect the checkbox of the specific row.
- Press and hold
Ctrland click the specific row. - Press
Ctrl&Enteron the desired rows (only when Keyboard Navigation is enabled). - Press
Shiftand use theUpandDownarrow keys to navigate to the desired rows (only when Keyboard Navigation is enabled).
To leave only the current row selected and deselect all previously selected rows:
- Click a row within the Grid.
- Press
Enterto select the active row (only when Keyboard Navigation is enabled).
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.