DxGridDataColumn.FilterRowCellTemplate Property

Allows you to replace default content with custom in the column’s filter row cell.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[Parameter]
public RenderFragment<GridDataColumnFilterRowCellTemplateContext> FilterRowCellTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridDataColumnFilterRowCellTemplateContext>

The template for the column’s filter row cell.

Remarks

Enable the ShowFilterRow option to activate a row that allows users to filter data. The filter row displays automatically generated in-place editors for all data columns. Editor types depend on data types of the corresponding column fields. You can customize settings of automatically generated editors, hide them, or replace them with other editors.

Read Tutorial: Filter Row Read Tutorial: Templates

Place one or more editors in a column’s FilterRowCellTemplate to display custom content in the filter row cell. In this template, you can also replace the Clear button if you have a command column. To define a custom template for all cells, define the Grid’s DataColumnFilterRowCellTemplate. Both templates include the context parameter that has the following properties:

DataColumnAllows you to access the processed column.GridAllows you to access the Grid and its extensive API.FilterCriteriaAllows you to apply filter criteria to the column.FilterRowValueAllows you to bind an editor value to a filter row value. Note that the editor should have a nullable value type.

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.

razor

<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) {
        }
    }
}

Run Demo: Data Grid - Filter Row View Example: Implement filter operator selector View Example: Implement a date range filter

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.

razor

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

Implements

FilterRowCellTemplate