ASP.NET Core Blazor | Filtering Data


syncfusion blazor datagrid filtering

This is Part 14 of Web development with Blazor video series. In this video we will discuss how to filter data.

Enable filtering in Blazor DataGrid

filtering data in blazor datagrid

  • To enable filtering set AllowFiltering property to true.
  • To disable filtering on a specific column, set AllowFiltering property on that specific GridColumn to false.
  • In the example below, filtering by Email column is disabled.
@page "/all"

<div style="width:700px">
    <SfGrid DataSource="@Employees" AllowFiltering="true">
        <GridColumns>
            <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"></GridColumn>
            <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
            <GridColumn Field=@nameof(Employee.Gender) HeaderText="Gender"></GridColumn>
            <GridColumn AllowFiltering="false" Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>
@code{
    public List<Employee> Employees { get; set; }

    [Inject]
    public IEmployeeService EmployeeService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Employees = (await EmployeeService.GetAllEmployees()).ToList();
    }
}

Filter Settings

  • To configure or customise filter settings use <GridFilterSettings> component.
  • For example, to filter data we have to press the enter key after typing the search term. This is the default behaviour.
  • On <GridFilterSettings> component, set Mode="FilterBarMode.Immediate" to perform an immediate search upon typing the search term.
  • You can also specify a time delay in milli-seconds. The default is 1500 milli-seconds.
  • In the example below ImmediateModeDelay property is set to 200 milli-seconds.
  • This means, filtering is performed after a delay of 200 milli-seconds after typing the search term.
<div style="width:700px">
    <SfGrid DataSource="@Employees" AllowFiltering="true">
        <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="200">
        </GridFilterSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"></GridColumn>
            <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
            <GridColumn Field=@nameof(Employee.Gender) HeaderText="Gender"></GridColumn>
            <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>

Initial Filter

  • To have the data filtered by one or more fields on the initial datagrid load, use <GridFilterColumns>.
  • In the following example initial filter is applied on two fields - EmployeeId and FirstName.
  • On each of the <GridFilterColumn> instance we have specified 3 properties - Field, Operator and Value.
<div style="width:700px">
    <SfGrid DataSource="@Employees" AllowFiltering="true">
        <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="200">
            <GridFilterColumns>
                <GridFilterColumn Field="EmployeeId" Operator="Operator.LessThanOrEqual" Value="10"></GridFilterColumn>
                <GridFilterColumn Field="FirstName" Operator="Operator.Contains" Value="@fn"></GridFilterColumn>
            </GridFilterColumns>
        </GridFilterSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"></GridColumn>
            <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
            <GridColumn Field=@nameof(Employee.Gender) HeaderText="Gender"></GridColumn>
            <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>
@code{
    public List<Employee> Employees { get; set; }
    string fn = "fn";

    [Inject]
    public IEmployeeService EmployeeService { get; set; }

    protected override async Task OnInitializedAsync()
    {
        Employees = (await EmployeeService.GetAllEmployees()).ToList();
    }
}

filtering data in asp.net core blazor

Filter operators

  • If an operator is not explicitly specified when defining initial filter, the default operator is Equal.
  • In the example above we used Contains and LessThanOrEqual operators.
  • The following are all the list of operators that we could use.

syncfusion datagrid filter operators

Change Default Filter Operator

  • To change the default filter operator use FilterSettings object.
  • In the example below, on the EmployeeId GridColumn we changed default operator to LessThanOrEqual instead of the default Equal operator.
<div style="width:700px">
    <SfGrid DataSource="@Employees" AllowFiltering="true">
        <GridFilterSettings Mode="FilterBarMode.Immediate" ImmediateModeDelay="200">
        </GridFilterSettings>
        <GridColumns>
            <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"
                        FilterSettings="@(new FilterSettings() { Operator = Operator.LessThanOrEqual })">
            </GridColumn>
            <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
            <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
            <GridColumn Field=@nameof(Employee.Gender) HeaderText="Gender"></GridColumn>
            <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
        </GridColumns>
    </SfGrid>
</div>

Filter bar expressions

Depending upon the column data type, we can use the following expressions in the filter bar textboxes to filter data.

syncfusion datagrid filter expressions





© 2020 Pragimtech. All Rights Reserved.