Filter Row
- 11 minutes to read
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>
Filter Row Settings
The Grid creates a text box editor in the filter row for every data column. You can implement a filter tow template to change the default editor. For more information, see the following section: Custom Filter Row Editors.
The Grid applies the Contains filter operator to columns bound to the String data type; in other cases, the Equals operator is used. You can use a column’s FilterRowOperatorType property to explicitly specify 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();
}
}
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";
}
}
Limitations
The Grid does not support filtering by display text when you use a Server Mode data source or GridDevExtremeDataSource.
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
andFalse
values.
@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 use the ClearFilterButtonVisible property to control button visibility.
You can also define the column’s FilterRowCellTemplate to display custom content in the filter row cell.
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:
@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.
Set the EditorRenderMode property to Integrated
to render editors so that they occupy the entire cell. In this mode, editor borders are not displayed.
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