Grid Filter Row
The FilterRow filtering mode renders a row below the column headers, providing a UI where you can fill in the filter criteria.
The Grid applies the filters as the user types in the filtering input.
Enabling Filter Row
Set the FilterMode parameter of the Telerik Grid to GridFilterMode.FilterRow and make sure that all filterable columns have their Field parameter set.
<TelerikGrid FilterMode="@GridFilterMode.FilterRow" />Also see the full runnable example below.
The default filter operator is Contains for string columns and IsEqualTo for numbers and dates. Boolean columns display a filtering drop down that effectively combines the filter operator and value.
Customization
You can customize the default behavior of the filter row with parameters of the columns and the Grid.
Configuring the Filter Row
You can override the default Filter Row behavior for each column through the following properties the GridColumn exposes:
| Parameter | Type and Default Value | Description |
|---|---|---|
DefaultFilterOperator | FilterOperator | Sets the default filter operator in the column it is declared for. Accepts a member of the FilterOperator enum. The selected operator must be applicable for the specific data type. Check the supported options in the Filter Operators article. |
Filterable | bool ( true) | Determines if the column renders allows filtering and renders filtering UI. Use the parameter to disable filtering for specific columns. |
FilterEditorFormat | string | The Format of the filtering component. Works for DateTime and numeric columns. Do not use a placeholder, for example, set "D", not "{0:D}". |
FilterEditorType | enum | The component to render for filtering of DateTime columns (DatePicker or DateTimePicker). |
FilterOperators | List<FilterListOperator> | Specifies the available operators. Must contain only supported filter operators for the specific data type. If not defined, the component will use a default list of available operators based on the field type. |
ShowFilterCellButtons | bool ( true) | controls the visibility of the filter buttons |
Debouncing the Filtering
By default, the filtering will be debounced with 150ms. Configure that with the following component parameter:
| Parameter | Type and Default Value | Description |
|---|---|---|
FilterRowDebounceDelay | int ( 150) | Time in milliseconds between the last typed symbol in the input and the actual filtering. Affects how fast the component initiates filtering. Use it to balance between client-side performance and number of database queries. |
Filter Row Template
The template will let you have full control over the Filter Row rendering and behavior. See how you can implement it and explore the example in the Filter Row Template article.
Filter From Code
To learn how to programmatically filter the Grid, refer to the Grid State documentation article. You can filter the Grid on initial display with the OnStateInit event or at any time afterwards with the SetStateAsync() method.
Example
Using the Grid Filter Row
@using Telerik.DataSource
<TelerikGrid Data="@GridData"
TItem="@Product"
FilterMode="GridFilterMode.FilterRow"
FilterRowDebounceDelay="200"
Pageable="true"
Sortable="true"
Height="400px">
<GridColumns>
<GridColumn Field="@nameof(Product.Name)"
DefaultFilterOperator="@FilterOperator.Contains"
ShowFilterCellButtons="false" />
<GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:c2}" />
<GridColumn Field="@nameof(Product.Quantity)" DisplayFormat="{0:n0}" />
<GridColumn Field="@nameof(Product.Released)"
DisplayFormat="{0:d}"
DefaultFilterOperator="@FilterOperator.IsGreaterThanOrEqualTo"
FilterEditorFormat="d"
FilterEditorType="@GridFilterEditorType.DatePicker" />
<GridColumn Field="@nameof(Product.Discontinued)" />
</GridColumns>
</TelerikGrid>
@code {
private List<Product> GridData { get; set; } = new();
protected override void OnInitialized()
{
var rnd = Random.Shared;
for (int i = 1; i <= 27; i++)
{
GridData.Add(new Product()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 10000),
Released = DateTime.Today.AddDays(-rnd.Next(60, 1000)),
Discontinued = i % 4 == 0
});
}
}
public class Product
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateTime Released { get; set; }
public bool Discontinued { get; set; }
}
}