DataGrid: Selection

Selecting

If you need to control how and when the grid row will be selected you can use a RowSelectable event handler. Here's a simple example where John's row is not selectable:
Name
David
MLaden
John
Ana
Jessica
<DataGrid TItem="Employee"
          Data="@employeeList"
          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.
#First NameLast NameEmailSalary
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
12YvetteFerryYvette22@gmail.com4,00 €
13PabloFriesenPablo_Friesen96@gmail.com77 090,27 €
14ErnestHomenickErnest_Homenick92@yahoo.com54 910,14 €
17TommySwaniawskiTommy_Swaniawski@gmail.com92 326,27 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          RowStyling="@OnRowStyling"
          SelectedRowStyling="@OnSelectedRowStyling"
          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.

#First NameLast NameEmailSalary
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
12YvetteFerryYvette22@gmail.com4,00 €
13PabloFriesenPablo_Friesen96@gmail.com77 090,27 €
14ErnestHomenickErnest_Homenick92@yahoo.com54 910,14 €
17TommySwaniawskiTommy_Swaniawski@gmail.com92 326,27 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          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.
#First NameLast NameEmailSalary
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
12YvetteFerryYvette22@gmail.com4,00 €
13PabloFriesenPablo_Friesen96@gmail.com77 090,27 €
14ErnestHomenickErnest_Homenick92@yahoo.com54 910,14 €
17TommySwaniawskiTommy_Swaniawski@gmail.com92 326,27 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          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;
}