Filtering in Blazor DataGrid Component

10 May 20227 minutes to read

Filtering allows you to view particular records based on filter criteria. To enable filtering in the DataGrid, set the AllowFiltering to true. Filtering options can be configured through GridFilterSettings component.

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowFiltering="true" AllowPaging="true">
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)],
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

The following screenshot shows filtering using FilterBar
Filtering in Blazor DataGrid

  • You can apply and clear filtering by using FilterByColumn and ClearFiltering methods.
  • To disable filtering for a particular column, set AllowFiltering property of GridColumn as false.

Initial filter

To apply the filter at initial rendering, set the filter Predicate object in Columns property of GridFilterSettings component.

@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowFiltering="true">
    <GridFilterSettings>
        <GridFilterColumns>
            <GridFilterColumn Field = "CustomerID" MatchCase =false Operator = "Operator.StartsWith" Predicate = "and" Value = "@val" ></GridFilterColumn>
        </GridFilterColumns>
    </GridFilterSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    public List<Order> Orders { get; set; }
    public string val="ANANTR";

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = (new DateTime[] { new DateTime(2010, 5, 1), new DateTime(2010, 5, 2), new DateTime(2010, 5, 3), })[new Random().Next(3)]
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}

The following screenshot shows Initial filtering using FilterBar
Blazor DataGrid with Initial Filter

Filter operators

The filter operator for a column can be defined in the Operator in Columns property of GridFilterSettings component.

The available operators and their supported data types are:

Operator  Description  Supported Types
StartsWith  Checks whether the value begins with the specified value.  String
EndsWith  Checks whether the value ends with the specified value.  String
Contains  Checks whether the value contains the specified value.  String
Equal  Checks whether the value is equal to the specified value.  String | Number | Boolean | Date
NotEqual  Checks for values not equal to the specified value.  String | Number | Boolean | Date
GreaterThan  Checks whether the value is greater than the specified value.  Number | Date
GreaterThanOrEqual Checks whether a value is greater than or equal to the specified value.  Number | Date
LessThan  Checks whether the value is less than the specified value.  Number | Date
LessThanOrEqual Checks whether the value is less than or equal to the specified value.  Number | Date

By default, the Operator value is Equal in Columns property of GridFilterSettings component.

Get filtered records when using remote data source

Use the GetFilteredRecordsAsync method to retrieve the details of the filtered records from the Grid component. The GetFilteredRecordsAsync method returns the filtered records in the form of objects when using a remote data source. So, you need to deserialize the object to retrieve the filtered records.

@using Syncfusion.Blazor.Data
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Newtonsoft.Json

<SfButton OnClick="Click">GetFilteredRecord</SfButton>

<SfGrid @ref="Grid" TValue="EmployeeData" ID="Grid" AllowPaging="true" AllowFiltering="true">
    <SfDataManager Url="https://services.odata.org/V4/Northwind/Northwind.svc/Orders/" Adaptor="Adaptors.ODataV4Adaptor"></SfDataManager>
    <GridColumns>
        <GridColumn Field=@nameof(EmployeeData.OrderID) TextAlign="TextAlign.Center" HeaderText="Order ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Customer ID" Width="120"></GridColumn>
        <GridColumn Field=@nameof(EmployeeData.CustomerID) TextAlign="TextAlign.Center" HeaderText="Customer Name" Width="130"></GridColumn>
    </GridColumns>
</SfGrid>

@code{
    SfGrid<EmployeeData> Grid;
    public class EmployeeData
    {
        public int OrderID { get; set; }
        public string CustomerID { get; set; }
        public int EmployeeID { get; set; }
    }

    public async Task Click()
    {
        var filteredData = await Grid.GetFilteredRecordsAsync();
        List<EmployeeData> filteredList = JsonConvert.DeserializeObject<List<EmployeeData>>(JsonConvert.SerializeObject(filteredData));
    }
}