Skip to main content

DxGrid.ShowFilterRow Property

Specifies whether the Grid displays the filter row.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool ShowFilterRow { get; set; }

Property Value

Type Default Description
Boolean false

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 View Example: Filter the column by multiple values

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 Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId"  Caption="Order ID" 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; }
    NorthwindContext Northwind { get; set; }

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

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

You can also use the FilterBy method to filter the Grid’s data by an individual column’s value. The method call replaces an existing filter value (if any) for the column.

Filter Data By Display Text

Set the FilterMode property to DisplayText to filter grid rows by display text. This scenario can be useful when you specify custom display text for cells (see the DisplayFormat property and CustomizeCellDisplayText event descriptions).

<DxGrid Data="@Data" CustomizeCellDisplayText="Grid_CustomizeCellDisplayText" 
    ShowFilterRow="true" PageSize="7">
    <Columns>
        <DxGridDataColumn FieldName="Date" DisplayFormat="D" 
            FilterMode="GridColumnFilterMode.DisplayText" />
        <DxGridDataColumn FieldName="CloudCover" />
        <DxGridDataColumn FieldName="TemperatureC" TextAlignment="GridTextAlignment.Left" Caption="Forecast"
            FilterMode="GridColumnFilterMode.DisplayText" />
    </Columns>
</DxGrid>
void Grid_CustomizeCellDisplayText(GridCustomizeCellDisplayTextEventArgs e) {
    if(e.FieldName == "TemperatureC") {
        int val = Convert.ToInt32(e.Value);
        if(val < 15)
            e.DisplayText = "Cold";
        else if(val < 25)
            e.DisplayText = "Warm";
        else 
            e.DisplayText = "Hot";
    }
}

Grid - Display Text Filter Mode

Custom Filter Row Editors

You can create templates for filter row cells. Template properties are available at the control and column levels.

Element Property
Control level template DxGrid.DataColumnFilterRowCellTemplate
Data column’s template DxGridDataColumn.FilterRowCellTemplate
Command column’s template DxGridCommandColumn.FilterRowCellTemplate
Selection column’s template DxGridSelectionColumn.FilterRowCellTemplate

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

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.

The command column also displays CRUD-related buttons (New, Edit, and Delete). To hide these buttons, disable the NewButtonVisible, EditButtonVisible, and DeleteButtonVisible options.

Blazor Grid Filter Row Command Column

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

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" 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 NewButtonVisible="false"
                             EditButtonVisible="false"
                             DeleteButtonVisible="false"/>
    </Columns>
</DxGrid>

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

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

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

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 Microsoft.EntityFrameworkCore
@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@implements IDisposable

<DxGrid Data="@Data"
        ShowFilterRow="true">
    <Columns>
        <DxGridDataColumn FieldName="OrderId" Caption="Order ID" 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 NewButtonVisible="false"
                             EditButtonVisible="false"
                             DeleteButtonVisible="false"/>
    </Columns>
</DxGrid>

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

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

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

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.

Detached Render Mode

Set the EditorRenderMode property to Integrated to render editors so that they occupy the entire cell. In this mode, editor borders are not displayed.

Integrated Render Mode

Customize Filter Row

Handle the CustomizeElement event to customize the Filter Row appearance. Compare the event argument’s e.ElementType property with the GridElementType.FilterRow value to determine whether the processed element is the Filter Row.

To customize individual Filter Row elements, use the following values for the e.ElementType property:

  • GridElementType.FilterCell
  • GridElementType.FilterCommandCell
  • GridElementType.FilterSelectionCell

Implements

See Also