Multiple Row Selection
The Grid component can allow the user to select many rows at a time, or to select only one.
In this article:
Basics
To use multiple row selection, set the SelectionMode property to Telerik.Blazor.GridSelectionMode.Multiple.
In Multiple SelectionMode, you can select rows through the following approaches:
- Click on a row to select only that row (and deselect any others)
- Press and hold
Ctrland click the desired rows to select or deselect them. - Click on the starting row in a range of rows that you want to select, press and hold
Shift, and click on the last row in the range. The first selected item is the start point of the range and the last selected target row is the end of the selection. - Select the checkbox of each desired row.
The Examples section showcases how you can use the grid features together.
Checkbox Selection
To add row selection checkboxes in each row, add a GridCheckboxColumn in the GridColumns collection of the grid. The user can select the desired rows through the checkboxes. The column provides additional configuration settings related to selection.
Usage:
<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.Current">
</GridCheckboxColumn>
Selected Items
The SelectedItemsChanged event receives a collection of the grid data model. It may have no items in it.
You can use the SelectedItems collection in two-way binding. You can use this to pre-select rows for your users.
The SelectedItems collection persists across paging operations. Changing the page will keep it populated and you can add more items to the selection.
Examples
Multiple Row Selection and Checkbox
You can add a checkbox column for selection. It is required if the InCell edit mode is used. Otherwise, it is optional.
Multiple Selection and a checkbox column.
You can select items by clicking a checkbox, or by clicking the rows. The Ctrl and Shift keys let you select more than one row when clicking it.
<TelerikGrid Data=@GridData
SelectionMode="@GridSelectionMode.Multiple"
Pageable="true">
<GridColumns>
<GridCheckboxColumn />
<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; }
}
}
SelectedItemsChanged Event
You can respond to the user action of selecting a new item through the SelectedItemsChanged event.
Multiple Selection and handling the SelectedItemsChanged event
@*Show details for selected items via the selection changed event*@
<TelerikGrid Data=@GridData
SelectionMode="@GridSelectionMode.Multiple"
SelectedItemsChanged="@((IEnumerable<Employee> employeeList) => OnSelect(employeeList))"
SelectedItems="@SelectedEmployees"
Pageable="true"
Height="400px">
<GridColumns>
<GridCheckboxColumn />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@if (SelectedEmployees != null)
{
<ul>
@foreach (Employee employee in SelectedEmployees)
{
<li>
@employee.Name
</li>
}
</ul>
}
@code {
public List<Employee> GridData { get; set; }
public IEnumerable<Employee> SelectedEmployees { get; set; } = Enumerable.Empty<Employee>();
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
});
}
}
protected void OnSelect(IEnumerable<Employee> employees)
{
SelectedEmployees = employees;
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}
The lambda expression in the handler is required by the framework: https://github.com/aspnet/AspNetCore/issues/12226.
Two-way Binding of SelectedItems
You can predefine the selected items for your users through the two-way binding of the SelectedItems property. The collection will be updated by the grid when the selection changes. Note that both binding to the property and using its event cannot be used at the same time, as Blazor only allows one.
Multiple Selection and two-way binding of the SelectedItems property
@*Use the selected items collection*@
<TelerikGrid Data=@GridData
SelectionMode="GridSelectionMode.Multiple"
@bind-SelectedItems="SelectedItems"
Pageable="true"
Height="400px">
<GridColumns>
<GridCheckboxColumn />
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.Team) Title="Team" />
</GridColumns>
</TelerikGrid>
@if (SelectedItems != null)
{
<ul>
@foreach (Employee employee in SelectedItems)
{
<li>
@employee.Name
</li>
}
</ul>
}
@code {
public List<Employee> GridData { get; set; }
public IEnumerable<Employee> SelectedItems { get; set; } = Enumerable.Empty<Employee>();
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
});
}
// select Employee with 3 through 5. Not required
SelectedItems = GridData.Skip(2).Take(3).ToList();
}
public class Employee
{
public int EmployeeId { get; set; }
public string Name { get; set; }
public string Team { get; set; }
}
}