# Row Selection

The Grid component supports [single or multiple row selection](https://www.telerik.com/blazor-ui/documentation/components/grid/selection/overview#use-single-or-multiple-selection). You can select a row with mouse click and through a checkbox column. You can access the collection of selected rows, use this collection and modify it. You can subscribe to selection events.

## Basics

By default, users can select rows by clicking anywhere in the row, except on command buttons.

To select a range of rows, hold the **Shift** key, while clicking on the first and last row of the range. To select or deselect multiple rows that don't belong to a range, hold the **Ctrl** key.

Check the [Grid Keyboard navigation demo](https://demos.telerik.com/blazor-ui/grid/keyboard-navigation) for detailed information about selecting rows with the keyboard.

To enable row selection:

1. Define the selection mode through one of the following options:
   * Set the [Grid `SelectionMode` parameter](https://www.telerik.com/blazor-ui/documentation/components/grid/selection/overview#use-single-or-multiple-selection), or
   * Add a `<GridSelectionSettings>` tag inside the Grid `<GridSettings>` tag, and set the `SelectionType` parameter to `GridSelectionType.Row`.
2. Set the Grid `SelectedItems` parameter to a collection of type `IEnumerable<TItem>` where `TItem` is the Grid model class. The collection must be initialized in advance.
3. Optionally, add a [checkbox column](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/checkbox) to the `GridColumns` collection of the Grid. The `GridCheckboxColumn` provides [additional configuration settings related to selection](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/checkbox#parameters).

> caption Grid multiple row selection

<demo metaUrl="client/grid/selection-rows/" height="500"></demo>

## SelectedItemsChanged Event

You can respond to user selection actions through the `SelectedItemsChanged` event. The event handler receives a collection of the Grid data model. The collection may have multiple, single, or no items in it, depending on the `SelectionMode` and the last user selection.

> The `SelectedItemsChanged` event handler cannot be awaited. To execute asynchronous operations when the user selects rows, use the [`OnRowClick`](https://www.telerik.com/blazor-ui/documentation/components/grid/events#onrowclick) or [`OnRowDoubleClick`](https://www.telerik.com/blazor-ui/documentation/components/grid/events#onrowdoubleclick) event instead.

> caption Using the Grid SelectedItemsChanged event

<demo metaUrl="client/grid/selection-rows-changed/" height="550"></demo>

## Selection When Data Changes

When the Grid `Data` collection changes, the `SelectedItems` collection has the following behavior:

* When the user updates a selected item and the item instance is replaced, you have to also replace the selected item object in the `SelectedItems` collection. Do that in the [Grid `OnUpdate` event](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#events).
* When the user deletes a selected item, the Grid automatically deletes it from the `SelectedItems` collection and the [`SelectedItemsChanged` event](https://www.telerik.com/blazor-ui/documentation/components/grid/selection/rows#selecteditemschanged-event) fires.
* To select a new item in the Grid you can use the [`OnCreate` event](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/overview#events) to update the `SelectedItems` collection.

## Equals Comparison

The items in `SelectedItems` are compared against the items in the Grid data in order to determine which rows will be highlighted. The default framework behavior is to compare objects by reference. The data item references may not match when:

* The Grid is databound through its `OnRead` event and each data request returns different data item instances.
* The `SelectedItems` are obtained from a different data source than the all Grid items, for example, from a separate service.

In such cases, the selected rows may not appear as expected. You have to [override the `Equals` method of the Grid model class](https://www.telerik.com/blazor-ui/documentation/components/grid/state#equals-comparison) so that the items are compared by a unique identifier rather than by reference. When you override `Equals`, it is also recommended to override the [`GetHashCode`](https://docs.microsoft.com/en-us/dotnet/api/system.object.gethashcode) method.

## Row Selection and Other Grid Features

The selection behavior may vary when other Grid features are enabled, such as editing, virtualization, paging, column and row templates, row drag and drop. In such cases you need to consider certain limitations or adjust the application code.

### Selection and Editing Modes

When users edit rows, the row selection has the following behavior:

* In [`Incell` edit mode](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/incell) the row selection can work only through a [checkbox column](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/checkbox). This is required due to the overlapping pointer events that trigger selection and editing. To see how to select the row that is being edited in `InCell` edit mode without using a `<GridCheckboxColumn />` check out the [Row Selection in Edit with InCell EditMode](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-select-on-incell-edit) KB article.
* [`Inline` edit mode](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/inline) and [`Popup` edit mode](https://www.telerik.com/blazor-ui/documentation/components/grid/editing/popup) integrate with row selection without limitations.

### Selection and Virtual Scrolling

When the Grid has [virtual scrolling](https://www.telerik.com/blazor-ui/documentation/components/grid/virtual-scrolling), the component is able to select a range of rows with **Shift** only if all rows in that range are currently rendered. Consider the following scenario:

1. Select a row.
2. Scroll down, so that virtualization kicks in and the rendered rows are no longer the same.
3. Select another row with **Shift**.

In this case, the range selection will start from the first row that is currently rendered.

### Selection and Paging

The `SelectedItems` collection persists across paging.

The [**Select All** checkbox in the Grid checkbox column](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/checkbox#parameters) cannot select items on other pages when using the Grid `OnRead` event.

### Selection and Templates

When using [Grid templates](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/overview) with row selection:

* If you are using a [Grid column template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/column) and you have a clickable element in the template, you can check the knowledge base article on [how to prevent row selection when the user clicks another component in the Grid column template](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-row-selection-in-column-template).
* If you are using a [row template](https://www.telerik.com/blazor-ui/documentation/components/grid/templates/row) the Grid cannot render a built-in [checkbox column](https://www.telerik.com/blazor-ui/documentation/components/grid/columns/checkbox). You have to render checkboxes manually and handle their changed event to populate the `SelectedItems` collection of the Grid. You can find an example to get started in the following knowledge base article: [Implement Built-in Functions when Using Grid Row Template](https://www.telerik.com/blazor-ui/documentation/knowledge-base/grid-row-template-simulate-built-in-functions).

### Selection and Row Drag and Drop

The Grid clears the `SelectedItems` collection when the user drags and drops selected rows.

## See Also

* [Live Demo: Grid Row Selection](https://demos.telerik.com/blazor-ui/grid/row-selection)
* [Blazor Grid](https://www.telerik.com/blazor-ui/documentation/components/grid/overview)
* [Grid Highlighting](https://www.telerik.com/blazor-ui/documentation/components/grid/highlighting)
