Skip to main content

DxGrid.FilterBy(String, GridFilterRowOperatorType, Object) Method

Filters grid data by the specified column value.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public void FilterBy(
    string columnFieldName,
    GridFilterRowOperatorType operatorType,
    object value
)

Parameters

Name Type Description
columnFieldName String

Specifies the name of the data source field that supplies data for the processed column. If the component does not contain the column that corresponds to the specified data field, an exception occurs.

operatorType GridFilterRowOperatorType

An enumeration value that specifies the column’s comparison operator.

value Object

Specifies a filter value.

Remarks

The FilterBy method allows you to filter grid data by an individual column’s value. The filter row displays the specified filter value in the corresponding column’s editor. The method call replaces an existing filter value (if any) for the column.

The Grid filters rows by cell values. Set the FilterMode property to DisplayText to filter grid rows by display text.

You can use the column’s FilterRowValue and FilterRowOperatorType properties to specify the initial value in a column’s filter row editor.

The highlighted code block adds two buttons that filter grid data by the corresponding column’s values.

@using Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowFilterRow="true"
        @ref="MyGrid">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null" />
    </Columns>
</DxGrid>

<DxButton Click="@(() => MyGrid.FilterBy("ProductName", GridFilterRowOperatorType.Contains, "Queso"))">
    Filter By "Product Name"
</DxButton>
<DxButton Click="@(() => MyGrid.FilterBy("UnitPrice", GridFilterRowOperatorType.Equal, 14))">
    Filter By "Unit Price"
</DxButton>

@code {
    object Data { get; set; }
    NorthwindContext Northwind { get; set; }
    IGrid MyGrid { get; set; }

    protected override void OnInitialized() {
        Northwind = NorthwindContextFactory.CreateDbContext();
        Data = Northwind.Invoices
            .ToList();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}

Blazor Grid Filter In Code

You can also use the FilterBy method to clear the filter condition in code. To do this, pass null to the method’s value parameter.

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

To clear all filter conditions in code, call the ClearFilter() method.

View Example: Filter the column by multiple values

For more information, see the following topic: Filter API in Blazor Grid.

See Also