New to Kendo UI for Angular? Start a free 30-day trial

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Single Row Selection

To select a row when the Grid is in single selection mode, use either of the following actions:

  • Click the row, or
  • Select the checkbox of the row, or
  • Press Enter on the row (only when Keyboard Navigation is enabled).

To deselect a row when the Grid is in single selection mode, either:

  • Deselect the checkbox of the selected row, or
  • Press and hold Ctrl, and click the selected row, or
  • Press Ctrl & Enter on the row (only when Keyboard Navigation is enabled).

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

Multiple Rows Selection

To select multiple rows one by one when the Grid is in multiple selection mode, use either of the following actions:

  • Select the checkbox of each desired row, or
  • Press and hold Ctrl, and click the desired rows, or
  • 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, either:

  • Click and drag the rectangular selection over the desired rows (only when the drag selection is enabled), or
  • 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 press Shift & 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, either:

  • Deselect the checkbox of the specific row, or
  • Press and hold Ctrl and click the specific row, or
  • 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, or
  • Press Enter to select the active row (only when Keyboard Navigation is enabled).

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.

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.

Example
View Source
Edit In Stackblitz  
Change Theme: