Skip to main content

DxGridDataColumn.FilterRowCellTemplate Property

Specifies a template used to display the column’s filter row cell.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.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 Grid data. The filter row displays in-place text editors for all data columns.

Define a column’s FilterRowCellTemplate to display a custom editor in the filter row cell. Bind these editors to nullable type variables. The template accepts a GridDataColumnFilterRowCellTemplateContext object as the context parameter. This parameter contains the FilterRowValue and FilterCriteria properties that specify the current filter row value and the entire filter criteria applied to the column. You can also access the DataColumn and Grid objects and use their members to get additional information about the column and the Grid, respectively.

To define a common template for all filter row cells in the grid, use the DataColumnFilterRowCellTemplate property.

The example below displays the following custom editors:

  • Order ID: DxSpinEdit. Users can click spin buttons or type a numeric value in the editor.
  • Order Date: DxDateEdit. Users can select a date from the drop-down calendar or type a date in the editor.
  • Unit Price: DxComboBox. The drop-down list contains a set of predefined criteria.
  • Shipped: DxComboBox. The drop-down list contains True and False values.

Blazor Grid Filter Row Custom Editors

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

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" SortIndex="0">
            <FilterRowCellTemplate>
                <DxSpinEdit Value="(int?)context.FilterRowValue"
                            ValueChanged="(int? v) => context.FilterRowValue = v"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d">
            <FilterRowCellTemplate>
                <DxDateEdit Date="(DateTime?)context.FilterRowValue"
                            DateChanged="(DateTime? v) => context.FilterRowValue = v"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"'
                          FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <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" >
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
            <FilterRowCellTemplate>
                <DxComboBox Value="(bool?)context.FilterRowValue"
                            ValueChanged="(bool? v) => context.FilterRowValue = v"
                            Data="ShippedStates" ValueFieldName="Value" TextFieldName="DisplayText"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

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

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

    static readonly IReadOnlyList<PriceFilterInterval> UnitPriceIntervals = new PriceFilterInterval[] {
        new("[UnitPrice] < 10", "< $10"),
        new("[UnitPrice] between (10, 100)", "$10 to $100"),
        new("[UnitPrice] > 100", "> $100")
    };
    static readonly IReadOnlyList<ShippedState> ShippedStates = new ShippedState[] {
        new(true, "Yes"),
        new(false, "No")
    };
    record PriceFilterInterval(CriteriaOperator Criteria, string DisplayText) {
        public PriceFilterInterval(string CriteriaText, string DisplayText)
            : this(CriteriaOperator.Parse(CriteriaText), DisplayText) {
        }
    }
    record ShippedState(bool? Value, string DisplayText);

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

Run Demo: Data Grid - Filter Row View Example: How to implement filter operator selector

Editor Render Mode

The Grid component renders editors in the filter row as standalone components with borders and paddings between an editor and cell borders. Set the EditorRenderMode property to Integrated to render editors, which are directly placed in the FilterRowCellTemplate template, so that they occupy the entire cell. In this mode, editor borders are not displayed.

See Also