Blazorise DataGrid: Filtering

Filtering allows you to view particular records based on filter criteria.

Overview

Filtering in the Blazorise DataGrid can be done using the built-in filtering functionality or by using a custom filter component. The built-in filter allows you to quickly filter data by a specific column using a text box. You can also specify the filter mode, such as "contains" or "starts with".

Examples

Filtering

Use an attribute Filterable to enable or disable automatic filtering in grid component.

Default method for filtering is Contains. If you want to change it you can set the FilterMethod attribute on data grid. Supported methods are:

Contains search for any occurrence (default)
StartsWith search only the beginning
EndsWith search only the ending
Equals search must match the entire value
NotEquals opposite of Equals

Name
David
Mladen
John
Ana
Jessica

<DataGrid TItem="Employee"
          Data="@employeeList"
          Filterable
          FilterMethod="DataGridFilterMethod.StartsWith"
          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 Filtering

Regular filter works on per field basis. To enable advanced search capabilities you can use an attribute CustomFilter. Filter API is fairly straightforward. All you need is to attach CustomFilter to a function and bind search value to TextEdit field. DataGrid will automatically respond to entered value.

Custom Filter:

Name
David
MLaden
John
Ana
Jessica

Custom Filter: <TextEdit Text="@customFilterValue" TextChanged="@OnCustomFilterValueChanged"></TextEdit>

<DataGrid @ref="dataGrid"
          TItem="Employee"
          Data="@employeeList"
          CustomFilter="@OnCustomFilter"
          Responsive>
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
</DataGrid>

@code{
    private DataGrid<Employee> dataGrid;
    private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "MLaden" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } };

    private string customFilterValue;

    private Task OnCustomFilterValueChanged( string e )
    {
        customFilterValue = e;
        return dataGrid.Reload();
    }

    private bool OnCustomFilter( Employee model )
    {
        // We want to accept empty value as valid or otherwise
        // datagrid will not show anything.
        if ( string.IsNullOrEmpty( customFilterValue ) )
            return true;

        return model.FirstName?.Contains( customFilterValue, StringComparison.OrdinalIgnoreCase ) == true;
    }

}

Custom Column Filtering

Similar to the DataGrid custom filtering, it is also possible to use custom filtering on a per-column basis. You can define your editor with custom filtering to filter column values. You can see the dropdown menu to filter by gender in the following example by specifying <FilterTemplate> on DataGridColumn.

Name	Gender
David	M
Mladen	M
John	M
Ana	F
Jessica	F

<DataGrid TItem="Employee"
          Data="@employeeList"
          Filterable
          Responsive>
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
    <DataGridSelectColumn CustomFilter="@OnGenderCustomFilter" Field="@nameof( Employee.Gender )" Caption="Gender" Editable>
        <FilterTemplate>
            <Select TValue="string" SelectedValue="@selectedGenderFilter" SelectedValueChanged="@(value => { selectedGenderFilter = value; context.TriggerFilterChange( selectedGenderFilter ); })">
                <SelectItem Value="@("*")">All</SelectItem>
                <SelectItem Value="@("M")">Male</SelectItem>
                <SelectItem Value="@("F")">Female</SelectItem>
                <SelectItem Value="@("D")">Diverse</SelectItem>
            </Select>
        </FilterTemplate>
    </DataGridSelectColumn>
</DataGrid>

@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David", Gender = "M" }, new() { FirstName = "Mladen", Gender = "M" }, new() { FirstName = "John", Gender = "M" }, new() { FirstName = "Ana", Gender = "F" }, new() { FirstName = "Jessica", Gender = "F" } };

    string selectedGenderFilter;

    private bool OnGenderCustomFilter( object itemValue, object searchValue )
    {
        if ( searchValue is string genderFilter )
        {
            return genderFilter == "*" || genderFilter == itemValue?.ToString();
        }

        return true;
    }

}