ASP.NET Core Blazor | Datagrid Filters

This is Part 16 of web development with blazor video series. In this video we will discuss different types of DataGrid filters. We discussed the basics of DataGrid filtering in our previous 2 videos in this series. 

Different types of Blazor DataGrid Filters

Out of the box, Syncfusion Blazor datagrid supports different types of filters.

1. FilterBar
2. Menu
3. CheckBox
4. Excel

Blazor Default DataGrid Filter

1. If the filter type is not explicitly specified, the default is FilterBar and it looks as shown below. 
2. For every column a textbox is provided as the default filter interface. 
3. We can use a custom HTML element, like a dropdownlist for example. 
4. In the Gender column we have a DropDownList as the filter interface instead of the default textbox.
5. We discussed implementing DropDownList as the filter interface in our previous video.

Explicitly set DataGrid Filter Type

• Use Type property of <GridFilterSettings> to explicitly set the filter type.
• In the following example, filter Type is set to Menu.

<div style="width:600px">
    <SfGrid @ref="employeeGrid" DataSource="@Employees" AllowPaging="true" AllowFiltering="true">
        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></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>
        </GridColumns>
    </SfGrid>
</div>

• The filter menu UI is rendered based on the grid column data type.
• In the example below, Date Of Birth column data type is DateTime, so the operators are less than, greater than etc. The user interface also contains calender and time picker elements.
• Filter menu can be turned off for a specific column by setting AllowFiltering="false" for that specific <GridColumn>.

Different filter types on different datagrid columns

• You can have a different filter on each datagrid column.
• Use Type property of <GridFilterSettings> to set the filter type at the DataGrid level.
• The filter type at the column level can then be overriden using FilterSettings property of <GridColumn> component.
• In the following example, at the DataGrid level filter type is set to Menu. 
• So all the grid columns will have the menu filter except EmployeeId and LastName columns.
• On EmployeeId we have CheckBox filter and on LastName Excel like filter.

<SfGrid @ref="employeeGrid" DataSource="@Employees" AllowPaging="true" AllowFiltering="true">
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"
            FilterSettings="@(new FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox })">
        </GridColumn>
        <GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
        <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"
            FilterSettings="@(new FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.Excel })">
        </GridColumn>
        <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
        <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
    </GridColumns>
</SfGrid>

Filter Item Template

• Using <FilterItemTemplate> component we can access and modify each CheckBox filter value for display purpose.
• Use the implicit named parameter context to access checkbox filter values.
• In the example below we are prepending 0 if EmployeeId value is <= 9.

<SfGrid @ref="employeeGrid" DataSource="@Employees" AllowPaging="true" AllowFiltering="true">
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID"
         FilterSettings="@(new FilterSettings() { Type = Syncfusion.Blazor.Grids.FilterType.CheckBox })">
            <FilterItemTemplate>
                @{
                    var filterContext = (context as FilterItemTemplateContext);
                    var itemTemplateValue = filterContext.Value;
                    if (Convert.ToInt32(itemTemplateValue) <= 9)
                    {
                        itemTemplateValue = "0" + itemTemplateValue;
                    }
                }
                @itemTemplateValue
            </FilterItemTemplate>
        </GridColumn>
        <GridColumn Field=@nameof(Employee.LastName) HeaderText=" Last Name"></GridColumn>
        <GridColumn Field=@nameof(Employee.DateOfBrith) HeaderText="Date of Birth"></GridColumn>
        <GridColumn Field=@nameof(Employee.Email) HeaderText="Email"></GridColumn>
    </GridColumns>
</SfGrid>

0 prepended to EmployeeId values <= 9