blazor-404325-components-grid-data-shaping-filter-data-filter-row.md
Enable the ShowFilterRow option to activate a row that allows users to filter data (filtering is case-insensitive.). The Grid component generates and configures cell editors for filter row cells based on associated column data types. 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="@Data" ShowFilterRow="true">
@*...*@
</DxGrid>
Run Demo: Data Grid - Filter Row
Declare an object that contains editor settings in the EditSettings property to customize the default editor or replace it with another editor. If the editor does not support the associated data type, the Grid uses a read-only text box instead. The table below lists classes that define cell editor settings and the corresponding data types:
|
Editor Settings
|
Generated for Data Types
|
Supported Data Types
| | --- | --- | --- | |
|
|
All data types
| |
|
DateOnly, DateTime, DateTimeOffset
|
DateOnly, DateTime, DateTimeOffset
| |
|
Never generated
|
Numeric, String, TimeSpan, TimeOnly,
DateTime, DateOnly, DateTimeOffset
| |
|
Never generated
|
| |
|
|
| |
|
|
| |
|
|
|
In the following code snippet, the ProductID column’s markup contains the DxSpinEditSettings object that customizes the automatically generated editor.
<DxGrid Data="@products"
ShowFilterRow="true"
EditMode="GridEditMode.EditRow">
<Columns>
<DxGridCommandColumn />
<DxGridDataColumn FieldName="ProductID" >
<EditSettings>
<DxSpinEditSettings ShowSpinButtons="false" ReadOnly="true" NullText="Type the ID" />
</EditSettings>
</DxGridDataColumn>
<DxGridDataColumn FieldName="ProductName" />
<DxGridDataColumn FieldName="UnitPrice" />
<DxGridDataColumn FieldName="UnitsInOrder" />
</Columns>
</DxGrid>
public class ProductService {
public Task<Product[]> GetData() {
List<Product> products = new List<Product>();
products.Add(new Product() { ProductID = 1, ProductName = "Chai", UnitPrice = 19, UnitsInOrder = 20 });
products.Add(new Product() { ProductID = 2, ProductName = "Chang", UnitPrice = 19, UnitsInOrder = 40 });
products.Add(new Product() { ProductID = 3, ProductName = "Aniseed Syrup", UnitPrice = 10, UnitsInOrder = 70 });
products.Add(new Product() { ProductID = 4, ProductName = "Chef Anton's Cajun Seasoning", UnitPrice = 22, UnitsInOrder = 12 });
products.Add(new Product() { ProductID = 5, ProductName = "Chef Anton's Gumbo Mix", UnitPrice = 21.35m, UnitsInOrder = 16 });
products.Add(new Product() { ProductID = 6, ProductName = "Grandma's Boysenberry Spread", UnitPrice = 25, UnitsInOrder = 20 });
products.Add(new Product() { ProductID = 7, ProductName = "Uncle Bob's Organic Dried Pears", UnitPrice = 30, UnitsInOrder = 24 });
products.Add(new Product() { ProductID = 8, ProductName = "Northwoods Cranberry Sauce", UnitPrice = 40, UnitsInOrder = 18 });
products.Add(new Product() { ProductID = 9, ProductName = "Mishi Kobe Niku", UnitPrice = 97, UnitsInOrder = 32 });
products.Add(new Product() { ProductID = 10, ProductName = "Ikura", UnitPrice = 31, UnitsInOrder = 10 });
products.Add(new Product() { ProductID = 11, ProductName = "Queso Cabrales", UnitPrice = 21, UnitsInOrder = 30 });
products.Add(new Product() { ProductID = 12, ProductName = "Queso Manchego La Pastora", UnitPrice = 38, UnitsInOrder = 10 });
return Task.FromResult(products.ToArray());
}
}
public class Product {
public int ProductID { get; set; }
public string ProductName { get; set; }
public decimal? UnitPrice { get; set; }
public short? UnitsInOrder { get; set; }
}
At runtime, you can handle the CustomizeFilterRowEditor event to customize editors in the filter row or call the GetColumnEditSettings method to access and customize editor settings.
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.
When a user clicks an editor’s Clear button, the filter row does not change the current operator type.
Note
The filter menu and filter row use the same set of filter criteria for fields and may affect each other. For example, when a user types a value in the filter row and then picks a value in a filter menu of the same column, the Grid component applies different criteria. When a user enters a value in the filter row again, the Grid applies the new operator set by the filter menu. You can implement the UI to change the filter row’s operator type to make sure which filter criteria is currently applied. Refer to the following example for additional information: https://github.com/DevExpress-Examples/blazor-grid-filter-operator-selector.
View Example: Incorporate a selector for filter row operator type
Set the FilterMode property to DisplayText to filter grid rows by display text. In this case, the Grid displays a text box editor in the column’s filter row cell. This scenario can be useful when you specify custom display text for cells (see DisplayFormat property and CustomizeCellDisplayText event descriptions).
Important
The Grid does not support filtering by display text when you use a Server Mode data source or GridDevExtremeDataSource.
<DxGrid Data="@Data" ShowFilterRow="true" CustomizeCellDisplayText="Grid_CustomizeCellDisplayText" >
<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>
@code {
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";
}
}
You can create templates for filter row cells. Template properties are available at the component and column levels.
| Element | Property |
|---|---|
| Component level template | DxGrid.DataColumnFilterRowCellTemplate |
| Data column’s template | DxGridDataColumn.FilterRowCellTemplate |
| Command column’s template | DxGridCommandColumn.FilterRowCellTemplate |
| Selection column’s template | DxGridSelectionColumn.FilterRowCellTemplate |
In the following code snippet, the UnitPrice column declares FilterRowCellTemplate. The template contains a combobox editor that allows users to select a filter from a set of predefined criteria.
<DxGrid Data="GridData" ShowFilterRow="true" >
<Columns>
<DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
<DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
<DxGridDataColumn FieldName="ProductName" />
<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" />
</Columns>
</DxGrid>
@code {
object GridData { get; set; }
static readonly IReadOnlyList<PriceFilterInterval> UnitPriceIntervals = new PriceFilterInterval[] {
new("[UnitPrice] < 10", "< $10"),
new("[UnitPrice] between (10, 100)", "$10 to $100"),
new("[UnitPrice] > 100", "> $100")
};
protected override async Task OnInitializedAsync() {
GridData = await NwindDataService.GetInvoicesAsync();
}
record PriceFilterInterval(CriteriaOperator Criteria, string DisplayText) {
public PriceFilterInterval(string CriteriaText, string DisplayText)
: this(CriteriaOperator.Parse(CriteriaText), DisplayText) {
}
}
}
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 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:
<DxGrid Data="GridData" ShowFilterRow="true" CssClass="my-grid" ColumnResizeMode="GridColumnResizeMode.ColumnsContainer">
<Columns>
<DxGridDataColumn FieldName="OrderId" Caption="Order ID" DisplayFormat="d" />
<DxGridDataColumn FieldName="OrderDate" DisplayFormat="d" />
<DxGridDataColumn FieldName="ProductName" FilterRowValue='"Queso"' />
<DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" />
<DxGridDataColumn FieldName="Shipped" FilterRowEditorVisible="false"
UnboundType="GridUnboundColumnType.Boolean"
UnboundExpression="[ShippedDate] <> Null" />
<DxGridCommandColumn NewButtonVisible="false" EditButtonVisible="false" DeleteButtonVisible="false" />
</Columns>
</DxGrid>
The Grid component renders editors in filter row and edit cells so that editors occupy the entire grid cell.
Set the Grid’s EditorRenderMode property to Detached to render automatically generated editors as standalone editors with their borders and paddings. This property also affects DevExpress Blazor editors placed directly in the following templates:
Handle the CustomizeElement event to customize 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.FilterCellGridElementType.FilterCommandCellGridElementType.FilterSelectionCellTo filter data as a user types in the filter row, follow the steps below:
OnInput to update the actual editor text each time when a user changes input text.<DxGridDataColumn Caption="Summary" FieldName="Summary">
<FilterRowCellTemplate>
<DxTextBox Text="@((string)context.FilterRowValue)" BindValueMode=BindValueMode.OnInput
TextChanged="(string v) => context.FilterRowValue = v" />
</FilterRowCellTemplate>
</DxGridDataColumn>
Filtering is always case-insensitive for most data sources except for a GridDevExtremeDataSource.
If a GridDevExtremeDataSource uses LINQ to Objects, it also ignores word case; otherwise, filtering is case-sensitive. Use the StringToLower option to enable/disable case sensitivity in the GridDevExtremeDataSource:
@inherits OwningComponentBase
@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
<DxGrid Data="@Data" PageSize="10">
<Columns>
<DxGridDataColumn FieldName="State" Width="5%" />
<DxGridDataColumn FieldName="Area" MinWidth="100" />
<DxGridDataColumn FieldName="City" Caption="County" MinWidth="100" />
<DxGridDataColumn FieldName="Name" Caption="Location" MinWidth="100" />
<DxGridDataColumn FieldName="Year" DisplayFormat="0" Width="10%" />
<DxGridDataColumn FieldName="Bedrooms" Width="10%" />
<DxGridDataColumn FieldName="Population" DisplayFormat="#,0" MinWidth="80" Width="10%" />
</Columns>
</DxGrid>
@code {
RentInfoDataService RentInfoDataService { get; set; }
object Data { get; set; }
protected override void OnInitialized() {
// Refer to https://learn.microsoft.com/dotnet/api/microsoft.aspnetcore.components.owningcomponentbase
RentInfoDataService = ScopedServices.GetRequiredService<RentInfoDataService>();
var connectionString = ConnectionStringUtils.GetGridLargeDataConnectionString(Configuration);
if(string.IsNullOrEmpty(connectionString)) return;
var dataSource = new GridDevExtremeDataSource<AreaRentInfo>(RentInfoDataService.GetAreaRentInfo());
dataSource.CustomizeLoadOptions = (loadOptions) => {
loadOptions.PrimaryKey = new[] { "Oid" };
loadOptions.PaginateViaPrimaryKey = true;
loadOptions.StringToLower = true;
};
Data = dataSource;
}
}
using System;
using System.Runtime.InteropServices;
namespace BlazorDemo.Data {
public partial class AreaRentInfo {
public AreaRentInfo() {
}
public Guid Oid { get; set; }
public string State { get; set; }
public string City { get; set; }
public string Area { get; set; }
public string Name { get; set; }
public int Population { get; set; }
public int Year { get; set; }
public int Bedrooms { get; set; }
public decimal Rent { get; set; }
}
}
using System.Collections.Generic;
using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using BlazorDemo.Data;
namespace BlazorDemo.Services {
public partial class RentInfoDataService {
public IQueryable<AreaRentInfo> GetAreaRentInfo() {
// Return your data here
}
}
}
// ...
builder.Services.AddScoped<RentInfoDataService>();
The Grid component automatically synchronizes filter changes across the following UI elements:
Of these elements, only the filter panel and filter builder can display all filter conditions. Other elements have limitations, for example, column filter menus do not support the Contains operator, and filter row cells cannot display the Betweencondition. To ensure the entire filter expression is visible, add a filter panel to the Grid. The panel also provides access to the filter builder dialog.
Note
The Grid updates a column’s FilterRowOperatorType once users apply filters to column data using another UI element. For instance, after a user selects a filter menu value, the column’s FilterRowOperatorType switches to Equals. The operator type remains Equals even after the filter is cleared.
You can extend filter row UI and display filter operators for each column. Refer to the following example for additional information: Incorporate a selector for filter row operator type.