Row Selection
The Grid provides the user with multiple interaction options to select rows, which are:
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
Enter
on 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
&Enter
on 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
&Enter
on 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
Shift
and click 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
&Enter
on 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
Ctrl
and click the specific row. - Press
Ctrl
&Enter
on 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
Enter
to 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.
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.