Blazor Grid - Selection

Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.

Selection#

Set AllowSelection="true" to enable the selection on the Grid. By default, SelectionMode is Single.

Selected Items Count: 0

Selected Employees:

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowSelection="true"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        Console.WriteLine("EmployeesDataProvider called...");

        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

Multiple Selection#

To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".

Selected Items Count: 0

Selected Employees:

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowSelection="true"
      SelectionMode="GridSelectionMode.Multiple"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        Console.WriteLine("EmployeesDataProvider called...");

        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

Note

Selected items are removed from the selection if they are not rendered after paging, sorting, filtering, etc.

Disable Selection#

We can disable the header checkbox or row level checkbox based on a condition. For this, we have DisableAllRowsSelection and DisableRowSelection delegate parameters. In the below example, we disabled the header checkbox if any of the employee Id is less than 105. Also, disable check the row level checkbox if the employee Id is less than 105.

Selected Items Count: 0

Selected Employees:

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowSelection="true"
      SelectionMode="GridSelectionMode.Multiple"
      DisableAllRowsSelection="DisableAllRowsSelectionHandler"
      DisableRowSelection="DisableRowSelectionHandler"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private bool DisableAllRowsSelectionHandler(IEnumerable<Employee1> employees)
    {
        return employees?.Any(x => x.Id < 105) ?? false; // disable selection if EmployeeId < 105
    }

    private bool DisableRowSelectionHandler(Employee1 emp)
    {
        return emp.Id < 105; // disable selection if EmployeeId < 105
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

Change selected row background color#

CSS

--bb-table-selected-row-color: rgba(0, 0, 0, 0.0725);
--bb-table-selected-row-background-color: rgba(0, 0, 0, 0.075);
--bb-table-selected-row-hover-color: #000;
--bb-table-selected-row-hover-background-color: rgba(0, 0, 0, 0.075);

These CSS variables are used to set the default colors and background color of a row when it's selected. You can override the --bb-table-selected-row-color, --bb-table-selected-row-background-color, --bb-table-selected-row-hover-color, and --bb-table-selected-row-hover-background-color variables in the application's specific CSS file to change the selected row's appearance. Please see the following example where the row text color is set to #fff (white) and the background color is set to #4c0bce (purple) when the row is selected.

Selected Items Count: 0

Selected Employees:

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      Style="--bb-table-selected-row-color: #fff;--bb-table-selected-row-background-color: #4c0bce;--bb-table-selected-row-hover-color: #fff;--bb-table-selected-row-hover-background-color: #4c0bce;"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowSelection="true"
      SelectionMode="GridSelectionMode.Multiple"
      SelectedItemsChanged="OnSelectedItemsChanged"
      Responsive="true">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        Console.WriteLine("EmployeesDataProvider called...");

        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
        };
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Bootstrap

Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
Code licensed Apache License 2.0.
Currently v3.0.0.

Blazor Grid - Selection

Selection#

Multiple Selection#

Disable Selection#

Change selected row background color#

Links

Guides

Community