DxGridDataColumn.FilterRowCellTemplate Property

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

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. 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.

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 Grid.Northwind
@using DevExpress.Data.Filtering
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" 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; }

    protected override void OnInitialized() {
        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);
}

Run Demo: Data Grid - Filter Row

See Also