Filter Row in Blazor Grid

• Jun 24, 2024
• 7 minutes to read

Enable the ShowFilterRow option to activate a row that allows users to filter data. The Grid component generates and configures cell editors for filter row cells based on associated column data types. When a user types into an editor, the Grid creates a filter condition based on the editor value and applies this condition to the corresponding column.

<DxGrid Data="@Data" ShowFilterRow="true">
    @*...*@
</DxGrid>

Run Demo: Data Grid - Filter Row

Filter Row Editor Settings

Declare an object that contains editor settings in the EditSettings property to customize the default editor or replace it with another editor. If the editor does not support the associated data type, the Grid uses a read-only text box instead. The table below lists classes that define cell editor settings and the corresponding data types:

Editor Settings	Generated for Data Types	Supported Data Types
DxComboBoxSettings	Enum, Boolean	All data types
DxDateEditSettings	DateOnly, DateTime, DateTimeOffset	DateOnly, DateTime, DateTimeOffset
DxMaskedInputSettings	Never generated	Numeric, String, TimeSpan, TimeOnly, DateTime, DateOnly, DateTimeOffset
DxMemoSettings	Never generated	String
DxSpinEditSettings	Numeric	Numeric
DxTextBoxSettings	String	String
DxTimeEditSettings	TimeOnly	TimeOnly, TimeSpan, DateTime

In the following code snippet, the ProductID column’s markup contains the DxSpinEditSettings object that customizes the automatically generated editor.

Razor

<DxGrid Data="@products" 
        ShowFilterRow="true" 
        EditMode="GridEditMode.EditRow">
    <Columns>
        <DxGridCommandColumn />
        <DxGridDataColumn FieldName="ProductID" >
            <EditSettings>
                <DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
            </EditSettings>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" />
        <DxGridDataColumn FieldName="UnitsInOrder" />
    </Columns>
</DxGrid>

ProductService.cs

public class ProductService {
    public Task<Product[]> GetData() {
        List<Product> products = new List<Product>();

        products.Add(new Product() { ProductID = 1, ProductName = "Chai", UnitPrice = 19, UnitsInOrder = 20 });
        products.Add(new Product() { ProductID = 2, ProductName = "Chang", UnitPrice = 19, UnitsInOrder = 40 });
        products.Add(new Product() { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10, UnitsInOrder = 70 });
        products.Add(new Product() { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", UnitPrice = 22, UnitsInOrder = 12 });
        products.Add(new Product() { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", UnitPrice = 21.35m, UnitsInOrder = 16 });
        products.Add(new Product() { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", UnitPrice = 25, UnitsInOrder = 20 });
        products.Add(new Product() { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", UnitPrice = 30, UnitsInOrder = 24 });
        products.Add(new Product() { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", UnitPrice = 40, UnitsInOrder = 18 });
        products.Add(new Product() { ProductID = 9, ProductName = "Mishi Kobe Niku", UnitPrice = 97, UnitsInOrder = 32 });
        products.Add(new Product() { ProductID = 10, ProductName = "Ikura", UnitPrice = 31, UnitsInOrder = 10 });
        products.Add(new Product() { ProductID = 11, ProductName = "Queso Cabrales", UnitPrice = 21, UnitsInOrder = 30 });
        products.Add(new Product() { ProductID = 12, ProductName = "Queso Manchego La Pastora", UnitPrice = 38, UnitsInOrder = 10 });

        return Task.FromResult(products.ToArray());
    }
}

Product.cs

public class Product {
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public decimal? UnitPrice { get; set; }
    public short? UnitsInOrder { get; set; }
}

Customize Editor Settings at Runtime

At runtime, you can handle the CustomizeFilterRowEditor event to customize editors in the filter row or call the GetColumnEditSettings method to access and customize editor settings.

Filter Row Operator Type and Initial Value

The Grid applies the Contains filter operator to columns bound to the String data type; in other cases, the Equals operator is used. You can use a column’s FilterRowOperatorType property to explicitly specify the operator type.

The FilterRowValue property allows you to specify the initial value in the filter row editor. If you define this property, you should also specify the FilterRowOperatorType property.

When a user clicks an editor’s Clear button, the filter row does not change the current operator type.

Note

The filter menu and filter row use the same set of filter criteria for fields and may affect each other. For example, when a user types a value in the filter row and then picks a value in a filter menu of the same column, the Grid component applies different criteria. When a user enters a value in the filter row again, the Grid applies the new operator set by the filter menu. You can implement the UI to change the filter row’s operator type to make sure which filter criteria is currently applied. Refer to the following example for more information: https://github.com/DevExpress-Examples/blazor-dxgrid-filter-operator-selector.

View Example: Incorporate a selector for filter row operator type

Filter Data By Display Text

Set the FilterMode property to DisplayText to filter grid rows by display text. In this case, the Grid displays a text box editor in the column’s filter row cell. This scenario can be useful when you specify custom display text for cells (see DisplayFormat property and CustomizeCellDisplayText event descriptions).

Important

The Grid does not support filtering by display text when you use a Server Mode data source or GridDevExtremeDataSource.

<DxGrid Data="@Data" ShowFilterRow="true" CustomizeCellDisplayText="Grid_CustomizeCellDisplayText" >
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" 
            FilterMode="GridColumnFilterMode.DisplayText" />
        <DxGridDataColumn FieldName="CloudCover" />
        <DxGridDataColumn FieldName="TemperatureC" TextAlignment="GridTextAlignment.Left" Caption="Forecast"
            FilterMode="GridColumnFilterMode.DisplayText" />
    </Columns>
</DxGrid>

@code {
    void Grid_CustomizeCellDisplayText(GridCustomizeCellDisplayTextEventArgs e) {
    if(e.FieldName == "TemperatureC") {
        int val = Convert.ToInt32(e.Value);
        if(val < 15)
            e.DisplayText = "Cold";
        else if(val < 25)
            e.DisplayText = "Warm";
        else 
            e.DisplayText = "Hot";
    }
}

Filter Row Cell Template

You can create templates for filter row cells. Template properties are available at the component and column levels.

Element	Property
Component level template	DxGrid.DataColumnFilterRowCellTemplate
Data column’s template	DxGridDataColumn.FilterRowCellTemplate
Command column’s template	DxGridCommandColumn.FilterRowCellTemplate
Selection column’s template	DxGridSelectionColumn.FilterRowCellTemplate

In the following code snippet, the UnitPrice column declares FilterRowCellTemplate. The template contains a combobox editor that allows users to select a filter from a set of predefined criteria.

<DxGrid Data="GridData" ShowFilterRow="true" >
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" >
            <FilterRowCellTemplate>
                <DxComboBox @bind-Value="context.FilterCriteria"
                            Data="UnitPriceIntervals" ValueFieldName="Criteria" TextFieldName="DisplayText"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Shipped" 
                          UnboundType="GridUnboundColumnType.Boolean" 
                          UnboundExpression="[ShippedDate] <> Null" />
    </Columns>
</DxGrid>


@code {
    object GridData { get; set; }
    static readonly IReadOnlyList<PriceFilterInterval> UnitPriceIntervals = new PriceFilterInterval[] {
        new("[UnitPrice] < 10", "< $10"),
        new("[UnitPrice] between (10, 100)", "$10 to $100"),
        new("[UnitPrice] > 100", "> $100")
    };
    protected override async Task OnInitializedAsync() {
        GridData = await NwindDataService.GetInvoicesAsync();
    }
    record PriceFilterInterval(CriteriaOperator Criteria, string DisplayText) {
        public PriceFilterInterval(string CriteriaText, string DisplayText)
            : this(CriteriaOperator.Parse(CriteriaText), DisplayText) {
        }
    }
}

Command Column

Declare a DxGridCommandColumn object in the Columns template to display a command column. This column contains the Clear button that resets the entire filter. You can use the ClearFilterButtonVisible property to control button visibility.

You can also define the column’s FilterRowCellTemplate to display custom content in the filter row cell.

Disable Column Filtering

Disable a column’s FilterRowEditorVisible property to prevent users from filtering data by this column.

The following example hides the filter row editor in the Shipped column:

<DxGrid Data="GridData" ShowFilterRow="true" CssClass="my-grid" ColumnResizeMode="GridColumnResizeMode.ColumnsContainer">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName" FilterRowValue='"Queso"' />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" FilterRowEditorVisible="false"
                          UnboundType="GridUnboundColumnType.Boolean" 
                          UnboundExpression="[ShippedDate] <> Null" />
        <DxGridCommandColumn NewButtonVisible="false" EditButtonVisible="false" DeleteButtonVisible="false" />
    </Columns>
</DxGrid>

Editor Render Mode

The Grid component renders editors in filter row and edit cells so that editors occupy the entire grid cell.

Set the Grid’s EditorRenderMode property to Detached to render automatically generated editors as standalone editors with their borders and paddings. This property also affects DevExpress Blazor editors placed directly in the following templates:

• CellEditTemplate
• DataColumnCellEditTemplate
• FilterRowCellTemplate
• DataColumnFilterRowCellTemplate

Customize Filter Row Appearance

Handle the CustomizeElement event to customize Filter Row appearance. Compare the event argument’s e.ElementType property with the GridElementType.FilterRow value to determine whether the processed element is the Filter Row.

To customize individual Filter Row elements, use the following values for the e.ElementType property:

• GridElementType.FilterCell
• GridElementType.FilterCommandCell
• GridElementType.FilterSelectionCell

Apply a Filter When a User Types Text

To filter data as a user types in the filter row, follow the steps below:

• Define a FilterRowCellTemplate and put a DxTextBox editor in the template.
• Set the editor’s BindValueMode to OnInput to update the actual editor text each time when a user changes input text.
• Handle the TextChanged event to apply a filter when editor text changes.

<DxGridDataColumn Caption="Summary" FieldName="Summary">
    <FilterRowCellTemplate>
        <DxTextBox Text="@((string)context.FilterRowValue)" BindValueMode=BindValueMode.OnInput
                   TextChanged="(string v) => context.FilterRowValue = v" />
    </FilterRowCellTemplate>
</DxGridDataColumn>

GitHub Examples

• Filter the column by multiple values
• Incorporate a selector for filter row operator type
• Implement a date range filter