Skip to main content
A newer version of this page is available. .

DxGridDataColumn.FilterRowCellTemplate Property

Allows you to replace an automatically generated editor with custom content in the column’s filter row cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[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

Place one or more editors in a column’s FilterRowCellTemplate to display custom content in the filter row cell. To define a custom template for all cells, define the Grid’s DataColumnFilterRowCellTemplate. Both templates include the context parameter that has the following properties:

DataColumn
Allows you to access the processed column.
Grid
Allows you to access the Grid and its extensive API.
FilterCriteria
Allows you to apply filter criteria to the column.
FilterRowValue
Allows you to bind an editor value to a filter row value. Note that the editor should have a nullable value type.

The Grid component renders editors in the filter row as standalone components with borders and paddings between editors and cell borders. If a cell in the filter row contains only a DevExpress Blazor editor, you can hide editor borders and render the editor so that it occupies the entire cell. For this purpose, set the Grid’s EditorRenderMode property to Integrated.

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

Blazor Grid Filter Row Custom Editors

<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

For more information about templates in the Grid component, refer to the following topic: Templates in Blazor Grid.

See Also