Blazor Grid

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

Client side filtering#

For filtering, AllowFiltering and PropertyName parameters are required.
Add AllowFiltering="true" parameter to Grid and PropertyName parameter to all the GridColumns.

Client side filtering with StringComparision#

In the below example, StringComparision.Ordinal is used on the Employee Name column to make the filter case-sensitive.
IMPORTANT
By default, StringComparison.OrdinalIgnoreCase is used to compare culture-agnostic and case-insensitive string matching.

Client side paging#

For paging, AllowPaging and PageSize parameters are required.
Add AllowPaging="true" and PageSize="20" parameters to the Grid. PageSize parameter is optional.
INFO
The default page size is 10.

Client side sorting#

For sorting, AllowSorting and SortKeySelector parameters are required.
Add AllowSorting="true" parameter to Grid and SortKeySelector to all the GridColumns.

Client side filtering, paging, and sorting#

Set default filter#

FilterOperator and FilterValue parameters are required to set the default filter.
TIP
You can set the default filter on more than one GridColumn.
The default sorting is enabled on the Id column in the below example.

Disable specific column filter#

Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.

Increase filter textbox width#

Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
NOTE
Filter textbox width measured in pixels.

Server side filtering, paging and sorting#

Set default sorting#

IsDefaultSortColumn parameter is required to set the default sorting. Add IsDefaultSortColumn="true" parameter to the GridColumn.
The default sort direction will be ascending. To change the default sorting of a column, add SortDirection="SortDirection.Descending" to the GridColumn.
INFO
If more than one GridColumn has the IsDefaultSortColumn paramter, it will pick the first column as the default sorting column.
The default sorting is enabled on the Employee Name column in the below example, and the sort direction is descending.

Disable specific column sorting#

Add Sortable="false"parameter the GridColumn to disable the sorting. If sorting is disabled, then the SortKeySelector parameter is not required. The sorting is disabled on the Designation column in the below example.
<Grid TItem="Employee1" class="table table-hover table-bordered table-striped" DataProvider="EmployeesDataProvider" AllowSorting="true">
    <GridColumn TItem="Employee1" HeaderText="Id" SortKeySelector="@(item => item.Id)">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" SortKeySelector="@(item => item.Name)">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" Sortable="false">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" SortKeySelector="@(item => item.DOJ)">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active" SortKeySelector="@(item => item.IsActive)">
        @context.IsActive
    </GridColumn>
</Grid>

@code {
    private IEnumerable<Employee1> employees;

    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 },
        };
    }
}

Header text alignment#

Use the HeaderTextAlignment parameter to change the header column alignment. By default, HeaderTextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.

Cell alignment#

Use the TextAlignment parameter to change the cell data alignment. By default, TextAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.

Cell formating#

To format the cell data, use ToString method and format strings. Refer: How to format numbers, dates, enums, and other types in .NET
TIP
Example: @context.Salary.ToString("N2").

Cell nowrap#

To prevent text from wrapping, add TextNoWrap="true" to the GridColumn.

Pagination alignment#

Change the alignment of pagination by adding the PaginationAlignment parameter to the Grid. By default, PaginationAlignment is set to Alignment.Start. Other options you can use are Alignment.Center and Alignment.End.

Empty data#

If there are no records to display in the Grid, by default, it will display the No records to display message. You can change this message by adding the EmptyText parameter to the Grid.

Save and Load Grid Settings#

This example shows how to save/load the Grid state. The state includes the page number, page size, and filters.
IMPORTANT
In version 0.5.1 and above, the Grid sorting state is not included as part of GridSettings. We will add it in the subsequent releases.
NOTE
Browser local storage is used to persist the Grid state. Common locations exist for persisting state are Server-side storage, URL, Browser storage, and In-memory state container service.

Data parameter - Assign collection#

Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.

Data parameter - Update collection#

You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.
Important

The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required.

The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required.

Conditional css class for grid row#

In the below example, we applied table-danger CSS class to the row where the employee is inactive and the table-success CSS class to the row where the employee designation is Architect.

Conditional css class for grid column#

In the below example, we applied table-danger CSS class to the Active column where the employee is inactive and the table-success CSS class to the Active column where the employee is active.

Custom column headers#

In the below example, we use <HeaderContent> and <ChildContent> tags to define custom column header and cell content. When defining header content, filters and sorting are removed from column.

Selection#

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

Multiple Selection#

To select multiple rows, set SelectionMode="GridSelectionMode.Multiple".
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.

Dynamic page size#

Page size selection#

Header row css class#

Filters row css class#

Row click event#

Row double click event#

Translations#

In the example below, you will see translations related to pagination and filters in Dutch.

Fixed header#

To set the fixed header, set the FixedHeader parameter to true. The minimum height of the grid is 320 pixels. You can change the units to em, pt, px, or etc. by setting the Unit parameter.

Fixed header with filters#

Freeze columns#

Freeze columns with fixed header#

Freeze columns with fixed header and filters#