Grid Selection
The Grid component offers support for row selection.
In this article:
Selection Basics
You can configure the selection behavior by setting SelectionMode to a member of the Telerik.Blazor.GridSelectionMode enum. The row selection can be:
To select a row, click on it. To select multiple rows, hold down the Ctrl or Shift key to extend the selection.
You can also use a checkbox column to select rows. To use it, add a GridCheckboxColumn in the GridColumns collection of the grid. It works with both selection modes. With multiple selection mode, the checkbox column offers additional functionality.
You can get or set the selected items through the SelectedItems property. It is a collection of items from the Grid's Data.
The single selection and multiple selection articles provide more examples and details on using the grid features.
Example - Enable Row Selection
See how the row selection modes work
<select @bind=@selectionMode>
<option value=@GridSelectionMode.Single>Single</option>
<option value=@GridSelectionMode.Multiple>Multiple</option>
</select>
<TelerikGrid Data=@GridData
SelectionMode="@selectionMode"
Pageable="true">
<GridColumns>
<GridCheckboxColumn SelectAll="@( selectionMode == GridSelectionMode.Single ? false : true )" Title="Select" Width="70px" />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
GridSelectionMode selectionMode = GridSelectionMode.Single;
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
Example - Select rows with checkboxes only
@* Require clicks on the checkboxes for row selection*@
<TelerikGrid Data=@GridData Navigable="true"
SelectionMode="GridSelectionMode.Multiple"
Pageable="true"
Height="400px">
<GridColumns>
<GridCheckboxColumn CheckBoxOnlySelection="true" />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
for (int i = 0; i < 15; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
Team = "Team " + i % 3
});
}
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
Notes
Editing Modes
InCell Edit Mode
In the Incell EditMode selection can be applied only via a checkbox column (<GridCheckboxColumn />). This is required due to the overlapping action that triggers selection and InCell editing (clicking in the row) - if row click selection was enabled with InCell editing, each attempt to select a row would put a cell in edit mode; and each attempt to edit a cell would select a new row. Such user experience is confusing, and so selection will only work through the row selection checkbox.
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 Knowledge Base article.
Inline and Popup Edit Modes
In Inline EditMode and Popup EditMode selection can be done by clicking on the desired row or by using a <GridCheckboxColumn />.
Selection in Template
When using the Grid column Template and you want to stop the Selection from being triggered when the user clicks in it, you should add the @onclick:stopPropagation directive to the element.
Prevent row selection from happening when the user clicks inside a template
<GridColumn Field=@nameof(Product.ProductId) Title="Id">
<Template>
<span @onclick:stopPropagation>
<TelerikNumericTextBox Value="@((context as Product).ProductId)"></TelerikNumericTextBox>
</span>
</Template>
</GridColumn>
If you are using the Row Template, the grid cannot render selection checkboxes for you, so you have to bind them yourself to a field in the model, and handle their selection changed event to populate the SelectedItems collection of the grid. You can find an example to get started in the following thread: Grid Row Template with Selection - Unsure how to Bind to Selected Item
Asynchronous Operations
Asynchronous operations such as loading data on demand should be handled in the OnRowClick or OnRowDoubleClick events rather than in the SelectedItemsChanged.
SelectedItems Equals Comparison
The SelectedItems collection is compared against the Grid Data collection in order to determine which rows will be highlighted. The default behavior of the framework is to compare objects by their reference.
When the SelectedItems are obtained from a different data source to the Grid (e.g., from a separate service method and not from the view-model), the references may not match and so there will be no highlighted items. In such cases, you have to override the Equals method of the underlying model class so that it matches them, for example, by a unique identifier rather than by reference so that two objects can be equal regardless of their origin, but according to their contents. When you are overriding the Equals method, it is also recommended to override the GetHashCode method as well.
Handle Data Changes
When the grid Data collection changes, the SelectedItems collection has the following behavior:
-
If the Grid does not use an
ObservableCollectionfor itsData- TheSelectedItemscollection will be preserved. You need to clear or manipulate it when the data is changed according to your needs and business logic.- If you update or delete an item, you must make the same update in the selected items through the grid editing events.
-
When using an
ObservableCollectionfor the gridData- If an item is removed or the entire data is cleared using the collection's.Clear()method, it will automatically update theSelectedItemscollection too (the removed Data items will be removed from the Selected Items collection).- The other CRUD operations (Create and Update), you should use the grid editing events to handle the situation according to your business logic and preferred behavior.
- When the data changes and the selected items are cleared, the
SelectedItemsChangedevent will fire with the empty collection. If you are using two-way binding, the collection will be cleared.
Selection in Grid with virtualized rows
When the Grid has virtualized rows and the SelectionMode is set to Multiple the selectable items will be the one in the current set of items (page). If you select an item and scroll down to some of the ones that are not rendered yet (virtualization kicks in) and you want to select that range with the Shift button, the selection will start from the position of the first item of the current set (page) to the last selected item.
Row Drag and Drop
If the user drags selected rows, the current row selection will be cleared on row drop.