DataGrid: Selection
Selecting
If you need to control how and when the grid row will be selected you can use aRowSelectable
event handler. Here's a simple example where John's row is not selectable:
<DataGrid TItem="Employee" Data="" RowSelectable=@((x)=> x.Item.FirstName != "John") Responsive> <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn> </DataGrid>
@code{ private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "MLaden" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } }; }
Custom Row Colors
You have full control over appearance of each row, including the selected rows.<DataGrid TItem="Employee" Data="" @bind-SelectedRow="" RowStyling="" SelectedRowStyling="" Responsive> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGrid>
@code{ [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; private Employee selectedEmployee; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private void OnRowStyling( Employee employee, DataGridRowStyling styling ) { if ( !employee.IsActive ) styling.Style = "color: red;"; } private void OnSelectedRowStyling( Employee employee, DataGridRowStyling styling ) { styling.Background = Background.Info; } }
Multiple Selection
Set SelectionMode
to DataGridSelectionMode.Multiple
to enable multiple selection on Datagrid.
Clicking rows will now select multiple records at a time. You can now access them by using the SelectedRows
parameter and also bind to the SelectedRowsChanged
event callback.
Optionally you can use the new Datagrid column DataGridMultiSelectColumn
to enable a checkbox column that works exclusively with multiple selection.
You can either use your own MultiSelectTemplate
render fragment to customize the input that will appear in the column and trigger the multiple selection by then binding to the provided SelectedChanged
event callback or just use the provided default by not specifying a MultiSelectTemplate
render fragment. When using this extra column, the top row column, will provide the ability to select or unselect all rows.
Shift-clicking will also select multiple rows starting from the last selected row.
<DataGrid TItem="Employee" Data="" @bind-SelectedRow="" SelectionMode="DataGridSelectionMode.Multiple" @bind-SelectedRows="selectedEmployees" Responsive> <DataGridMultiSelectColumn Width="30px"></DataGridMultiSelectColumn> <DataGridCommandColumn /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGrid>
@code{ [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; private Employee selectedEmployee; private List<Employee> selectedEmployees; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } }
RowSelectable & Multiple Selection
Here's an example of combining both RowSelectable and Multiple Selection. We've disabled regular selection through row click, and only enabled selection through clicking the provided multi select checkboxes.<DataGrid TItem="Employee" Data="" @bind-SelectedRow="" SelectionMode="DataGridSelectionMode.Multiple" @bind-SelectedRows="selectedEmployees" Responsive RowSelectable="RowSelectableHandler"> <DataGridMultiSelectColumn TItem="Employee" Width="30px"></DataGridMultiSelectColumn> <DataGridCommandColumn TItem="Employee" /> <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" /> <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable /> <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable /> <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable /> <DataGridColumn Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable> <EditTemplate> <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" /> </EditTemplate> </DataGridColumn> </DataGrid>
@code { [Inject] public EmployeeData EmployeeData { get; set; } private List<Employee> employeeList; private Employee selectedEmployee; private List<Employee> selectedEmployees; protected override async Task OnInitializedAsync() { employeeList = await EmployeeData.GetDataAsync(); await base.OnInitializedAsync(); } private bool RowSelectableHandler( RowSelectableEventArgs<Employee> rowSelectableEventArgs ) => rowSelectableEventArgs.SelectReason is not DataGridSelectReason.RowClick; }