New to Telerik UI for Blazor? Start a free 30-day trial
Use Filter Operator Drop-Down in Filter Template
Environment
| Product | Grid for Blazor, TreeList for Blazor |
Description
This KB article answers the following questions:
- How to implement a filter operator dropdown list in a Grid filter row template (
FilterCellTemplate)? - How to reuse the filter operator logic and the clear filter button logic across multiple filter cell templates?
Solution
The example below shows how to mimic the following built-in features, which exist in the FilterRow FilterMode of the Grid and TreeList:
- Operator DropDownList, which allows users to select filter operators like "equal to", "starts with", etc.
- Clear Button, which allows users to clear the column's filter.
The sample also shows a few additional optional features:
- Highlight the Filter Operator DropDownList when the column is filtered. See the
IsFilterActiveparameter ofFilterOperatorList. - Choose the available options in the Filter Operator DropDownList. See the
FilterOperatorsparameter ofFilterOperatorList.
FilterOperatorList and FilterClearButton are custom Razor components. The implementation is just an example and subject to customization, according to the specific scenario and business requirements. Refer to the Grid Filtering and Grid Filter Templates documentation for more information about how filtering works.
Using Filter Operators and Clear Button in FilterCellTemplate
RAZOR
@using Telerik.DataSource
<TelerikGrid Data="@GridData"
Pageable="true"
Sortable="true"
FilterMode="GridFilterMode.FilterRow">
<GridColumns>
<GridColumn Field="@nameof(SampleModel.Name)">
<FilterCellTemplate>
<TelerikTextBox Value="@NameFilterValue"
ValueChanged="@( async (string newValue) => await NameFilterValueChanged(newValue, context) )" />
<FilterOperatorList FilterValue="@NameFilterValue" @bind-FilterContext="@context"
FilterOperators="@( new List<FilterOperator> { FilterOperator.Contains, FilterOperator.StartsWith })" />
<FilterClearButton @bind-FilterValue="@NameFilterValue" FilterContext="@context" />
</FilterCellTemplate>
</GridColumn>
<GridColumn Field="@nameof(SampleModel.Price)">
<FilterCellTemplate>
<TelerikNumericTextBox Value="@PriceFilterValue"
ValueChanged="@( async (decimal? newValue) => await PriceFilterValueChanged(newValue, context) )" />
<FilterOperatorList FilterValue="@PriceFilterValue" @bind-FilterContext="@context" />
<FilterClearButton @bind-FilterValue="@PriceFilterValue" FilterContext="@context" />
</FilterCellTemplate>
</GridColumn>
<GridColumn Field="@nameof(SampleModel.Quantity)">
<FilterCellTemplate>
<TelerikNumericTextBox Value="@QuantityFilterValue"
ValueChanged="@( async (int? newValue) => await QuantityFilterValueChanged(newValue, context) )" />
<FilterOperatorList FilterValue="@QuantityFilterValue" @bind-FilterContext="@context" />
<FilterClearButton @bind-FilterValue="@QuantityFilterValue" FilterContext="@context" />
</FilterCellTemplate>
</GridColumn>
<GridColumn Field="@nameof(SampleModel.StartDate)">
<FilterCellTemplate>
<TelerikDatePicker Value="@StartDateFilterValue"
ValueChanged="@( async (DateOnly? newValue) => await StartDateFilterValueChanged(newValue, context) )" />
<FilterOperatorList FilterValue="@StartDateFilterValue" @bind-FilterContext="@context" />
<FilterClearButton @bind-FilterValue="@StartDateFilterValue" FilterContext="@context" />
</FilterCellTemplate>
</GridColumn>
</GridColumns>
</TelerikGrid>
@code {
private List<SampleModel> GridData { get; set; } = new();
#region Filter Templates
private string NameFilterValue { get; set; } = string.Empty;
private decimal? PriceFilterValue { get; set; }
private int? QuantityFilterValue { get; set; }
private DateOnly? StartDateFilterValue { get; set; }
private async Task NameFilterValueChanged(string newValue, FilterCellTemplateContext context)
{
NameFilterValue = newValue;
await FilterValueChanged(newValue, context);
}
private async Task PriceFilterValueChanged(decimal? newValue, FilterCellTemplateContext context)
{
PriceFilterValue = newValue;
await FilterValueChanged(newValue, context);
}
private async Task QuantityFilterValueChanged(int? newValue, FilterCellTemplateContext context)
{
QuantityFilterValue = newValue;
await FilterValueChanged(newValue, context);
}
private async Task StartDateFilterValueChanged(DateOnly? newValue, FilterCellTemplateContext context)
{
StartDateFilterValue = newValue;
await FilterValueChanged(newValue, context);
}
private async Task FilterValueChanged(object? newValue, FilterCellTemplateContext context)
{
if (newValue == null)
{
await context.ClearFilterAsync();
}
else
{
context.FilterDescriptor.FilterDescriptors.OfType<FilterDescriptor>().First().Value = newValue;
await context.FilterAsync();
}
}
#endregion Filter Templates
protected override void OnInitialized()
{
var rnd = new Random();
for (int i = 1; i <= 100; i++)
{
GridData.Add(new SampleModel()
{
Id = i,
Name = $"Name {i} {(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}{(char)rnd.Next(65, 91)}",
Price = rnd.Next(1, 100) * 1.23m,
Quantity = rnd.Next(0, 1000),
StartDate = DateOnly.FromDateTime(DateTime.Now.AddDays(-rnd.Next(60, 1000)))
});
}
}
public class SampleModel
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public decimal Price { get; set; }
public int Quantity { get; set; }
public DateOnly StartDate { get; set; }
}
}