DxGrid.ShowFilterRow Property

Specifies whether the Grid displays the filter row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.1.dll

Declaration

[Parameter]
public bool ShowFilterRow { get; set; }

Property Value

Type Description
Boolean

true to display the filter row; otherwise, false.

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. 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="@DataSource"
        ShowFilterRow="true">
    @*...*@
</DxGrid>

Blazor Grid Filter Row

Run Demo: Data Grid - Filter Row

Filter Row Settings

The Grid automatically chooses an operator type used to create a filter condition: Contains for columns bound to the String data type; Equals in other cases. You can use a column’s FilterRowOperatorType property to change 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.

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId"  DisplayFormat="d"/>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"'
                          FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

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

Custom Filter Row Editors

Define a column’s FilterRowCellTemplate to display a custom editor in the filter row cell. Use the template’s context paramter to access the FilterRowValue and FilterCriteria properties. They specify the current filter row value and the entire filter criteria applied to the column.

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

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 also define the column’s FilterRowCellTemplate to display custom content in the filter row cell.

Blazor Grid Filter Row Command Column

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" DisplayFormat="d" />
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"'
                          FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridCommandColumn />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

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

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.

Blazor Grid Filter Row Hidden Editor

@using Grid.Northwind
@inject NorthwindContext Northwind

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId"  DisplayFormat="d"/>
        <DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
        <DxGridDataColumn FieldName="ProductName"
                          FilterRowValue='"Queso"' FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
        <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
        <DxGridDataColumn FieldName="Shipped" UnboundType="GridUnboundColumnType.Boolean"
                          UnboundExpression="[ShippedDate] <> Null"
                          FilterRowEditorVisible="false">
            <CellDisplayTemplate>
                <DxCheckBox CssClass="d-inline-block" Enabled="false" Checked="(bool)context.Value" />
            </CellDisplayTemplate>
        </DxGridDataColumn>
        <DxGridCommandColumn />
    </Columns>
</DxGrid>

@code {
    object Data { get; set; }

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

Implements

See Also