Filter API in Blazor Grid

• Aug 12, 2025
• 5 minutes to read

The Grid component allows you to apply filters in the UI and in code. This topic explains how to apply filters in code.

Run Demo: Grid - Filter API View Example: Filter the column by multiple values

Apply Filter Criteria

Use the following methods to apply filter criteria to a column or to specify criteria for the entire grid’s data. When you specify filter criteria for specific columns, the grid uses the AND operator to apply filters to different columns at the same time. For more information about criteria operators, see the following topic: Criteria Language Syntax.

FilterBy(String, GridFilterRowOperatorType, Object)

Filters grid data by individual grid column values.

SetFieldFilterCriteria(String, CriteriaOperator)

Applies a filter to the specified data field, including fields not displayed in the Grid.

SetFilterCriteria(CriteriaOperator)

Applies a filter to grid data. When you call this method, the grid clears all filters applied previously.

The Grid filters rows by cell values. Set a column’s FilterMode property to DisplayText to filter data in this column by display text.

When a filter is applied, the Grid raises the FilterCriteriaChanged event and displays the specified filter value in the filter row.

GridDevExtremeDataSource Specifics

The GridDevExtremeDataSource is based on the DevExtreme.AspNet.Data library that uses its own filter language syntax. Some structures of criteria language syntax cannot be converted to DevExtreme data source syntax. This section describes criteria operators that are supported by the GridDevExtremeDataSource.

Binary Operator

The BinaryOperator criteria operator allows you to compare operand property with operand value. You can use the following operator types for comparison: Equal, NotEqual, Greater, GreaterOrEqual, Less, and LessOrEqual.

var criteria = new BinaryOperator("UnitPrice", 20, BinaryOperatorType.Less);

Unary Operator

The UnaryOperator criteria operator allows you to apply Not or IsNull operation to an expression.

var criteria = new UnaryOperator(UnaryOperatorType.Not, new UnaryOperator(UnaryOperatorType.IsNull, "Region"));

Function Operator

The FunctionOperator criteria operator allows you to create a complex filter criteria with the following operator types:

• IsNull and IsNullOrEmpty operands indicate whether a specified operand is a null reference or an empty string.
• InRange operand determines whether a property value is contained in the specified range.
• StartsWith, EndsWith, and Contains operands allow you to compare a property with a string value.

var criteria = new FunctionOperator(FunctionOperatorType.StartsWith, new OperandProperty("ShipCountry"), "it");

Group Operator

The GroupOperator criteria operator allows you to create a logical expression that groups two or more operands with a logical AND or OR.

var criteria = new GroupOperator(GroupOperatorType.And,
        new BinaryOperator("UnitPrice", 20, BinaryOperatorType.Less),
        new FunctionOperator(FunctionOperatorType.StartsWith, new OperandProperty("ShipCountry"), "it"));

Between Operator

The BetweenOperator criteria operator allows you to determine whether a criteria expression lies between the specified range of values.

var criteria = new BetweenOperator("UnitPrice", 15, 20);

In Operator

The InOperator criteria operator allows you to determine whether a property value matches any value in a specified list.

var criteria = new InOperator("ShipCountry", new string[] { "Italy", "German", "France" });

Get the Applied Filter Criteria

Call the following methods to get the applied filter criteria:

GetFilterCriteria()

Returns the criteria operator applied to the Grid.

GetFieldFilterCriteria(String)

Returns the criteria operator applied to the specified data field.

Clear the Applied Filter Criteria

Call the following methods to clear a specific column filter condition or to remove all applied filter conditions:

• Pass the null value to the FilterBy(String, GridFilterRowOperatorType, Object) method to clear filter criteria applied to the specified column.

  @* Clears the "Product Name" Filter Condition *@
  <DxButton Click="@(() => Grid.FilterBy("ProductName", GridFilterRowOperatorType.Contains, null))" Text="Clear" />
  

• Pass the null value to the SetFieldFilterCriteria(String, CriteriaOperator) method to clear filter criteria applied to the specified data field.

  @* Clears the "Product Name" Filter Condition *@
  <DxButton Click="@(() => Grid.SetFieldFilterCriteria("ProductName", null))" Text="Clear" />
  

• Pass the null value to the SetFilterCriteria(CriteriaOperator) method to clear all filter criteria applied to grid data.

  @* Clears Every Filter Condition *@
  <DxButton Click="@(() => Grid.SetFilterCriteria(null))" Text="Clear" />
  

• Call the ClearFilter() method to clear all filter criteria applied to grid data.

  @* Clears Every Filter Condition *@
  <DxButton Click="@(() => Grid.ClearFilter())" Text="Clear" />
  

Case-Insensitive Filtering

Filtering is always case-insensitive for most data sources except for a GridDevExtremeDataSource.

If a GridDevExtremeDataSource uses LINQ to Objects, it also ignores word case; otherwise, filtering is case-sensitive. Use the StringToLower option to enable/disable case sensitivity in the GridDevExtremeDataSource:

Razor

@inherits OwningComponentBase
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
<DxGrid Data="@Data" PageSize="10">
    <Columns>
        <DxGridDataColumn FieldName="State" Width="5%" />
        <DxGridDataColumn FieldName="Area" MinWidth="100" />
        <DxGridDataColumn FieldName="City" Caption="County" MinWidth="100" />
        <DxGridDataColumn FieldName="Name" Caption="Location" MinWidth="100" />
        <DxGridDataColumn FieldName="Year" DisplayFormat="0" Width="10%" />
        <DxGridDataColumn FieldName="Bedrooms" Width="10%" />
        <DxGridDataColumn FieldName="Population" DisplayFormat="#,0" MinWidth="80" Width="10%" />
    </Columns>
</DxGrid>

@code {
    RentInfoDataService RentInfoDataService { get; set; }
    object Data { get; set; }
    protected override void OnInitialized() {
        // Refer to https://learn.microsoft.com/dotnet/api/microsoft.aspnetcore.components.owningcomponentbase
        RentInfoDataService = ScopedServices.GetRequiredService<RentInfoDataService>();
        var connectionString = ConnectionStringUtils.GetGridLargeDataConnectionString(Configuration);
        if(string.IsNullOrEmpty(connectionString)) return;
        var dataSource = new GridDevExtremeDataSource<AreaRentInfo>(RentInfoDataService.GetAreaRentInfo());
        dataSource.CustomizeLoadOptions = (loadOptions) => {
            loadOptions.PrimaryKey = new[] { "Oid" };
            loadOptions.PaginateViaPrimaryKey = true;
            loadOptions.StringToLower = true;
        };
        Data = dataSource;
    }
}

AreaRentInfo.cs

using System;
using System.Runtime.InteropServices;

namespace BlazorDemo.Data {
    public partial class AreaRentInfo {
        public AreaRentInfo() {
        }
        public Guid Oid { get; set; }
        public string State { get; set; }
        public string City { get; set; }
        public string Area { get; set; }
        public string Name { get; set; }
        public int Population { get; set; }
        public int Year { get; set; }
        public int Bedrooms { get; set; }
        public decimal Rent { get; set; }
    }
}

RentInfoDataService.cs

using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data;

namespace BlazorDemo.Services {
    public partial class RentInfoDataService {
        public IQueryable<AreaRentInfo> GetAreaRentInfo() {
            // Return your data here
        }
    }
}

Program.cs

// ...
builder.Services.AddScoped<RentInfoDataService>();

Search Box Filter

You can use the search box API to filter grid data in code. Search settings do not affect the applied filter criteria that are still in effect. Set the SearchText property to show only rows with matching values.

<DxGrid Data="Products" PageSize="5" ShowFilterRow="true" SearchText="en">
    <Columns>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="Category"/>
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" 
                          FilterRowOperatorType="GridFilterRowOperatorType.LessOrEqual"  />
    </Columns>
</DxGrid>

For more information, see the following section: Search Text in Code.