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 TItem="Employee" 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 Name	Last Name	Email	Salary
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
8	Maryann	Hilpert	Maryann.Hilpert12@gmail.com	89 153,38 €
10	Angelina	Ward	Angelina42@gmail.com	73 625,86 €
11	Kara	Brekke	Kara.Brekke@hotmail.com	58 321,87 €

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          RowStyling="@OnRowStyling"
          SelectedRowStyling="@OnSelectedRowStyling"
          Responsive>
    <DataGridCommandColumn TItem="Employee" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable="true">
        <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 Name	Last Name	Email	Salary
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
8	Maryann	Hilpert	Maryann.Hilpert12@gmail.com	89 153,38 €
10	Angelina	Ward	Angelina42@gmail.com	73 625,86 €
11	Kara	Brekke	Kara.Brekke@hotmail.com	58 321,87 €

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          SelectionMode="DataGridSelectionMode.Multiple"
          @bind-SelectedRows="selectedEmployees"
          Responsive>
    <DataGridMultiSelectColumn TItem="Employee" Width="30px"></DataGridMultiSelectColumn>
    <DataGridCommandColumn TItem="Employee" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable="true">
        <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 Name	Last Name	Email	Salary
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
8	Maryann	Hilpert	Maryann.Hilpert12@gmail.com	89 153,38 €
10	Angelina	Ward	Angelina42@gmail.com	73 625,86 €
11	Kara	Brekke	Kara.Brekke@hotmail.com	58 321,87 €

<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 TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable="true">
        <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;
}