Grid Filter Menu
One of the filter modes of the grid is a popup menu with filter options that you can open from the column headers.
In this article:
Basics
To enable the filter menu, set the FilterMode property of the grid to Telerik.Blazor.GridFilterMode.FilterMenu.
The grid will render a button in the column header that you click to get a popup with filtering options. The popup lets you choose filter operator, filter criteria, to apply and clear the filter.
The filter is applied only upon a button click, not upon input change. This may improve performance if you use manual CRUD operations by reducing the number of requests compared to using the Filter Row.
Filter Menu in Telerik Grid
@* Filter menu in the column header *@
<TelerikGrid Data=@GridData FilterMode="Telerik.Blazor.GridFilterMode.FilterMenu"
Pageable="true" Height="400px">
<GridColumns>
<GridColumn Field=@nameof(Employee.Name) />
<GridColumn Field=@nameof(Employee.AgeInYears) Title="Age" />
<GridColumn Field=@nameof(Employee.HireDate) Title="Hire Date" />
<GridColumn Field=@nameof(Employee.IsOnLeave) Title="On Vacation" />
</GridColumns>
</TelerikGrid>
@code {
public List<Employee> GridData { get; set; }
protected override void OnInitialized()
{
GridData = new List<Employee>();
var rand = new Random();
for (int i = 0; i < 100; i++)
{
GridData.Add(new Employee()
{
EmployeeId = i,
Name = "Employee " + i.ToString(),
AgeInYears = rand.Next(10, 80),
HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)),
IsOnLeave = i % 3 == 0
});
}
}
public class Employee
{
public int? EmployeeId { get; set; }
public string Name { get; set; }
public int? AgeInYears { get; set; }
public DateTime HireDate { get; set; }
public bool IsOnLeave { get; set; }
}
}
The result from the code snippet above, after the "Age" column has been filtered with <= 30 operator.
Filter From Code
You can set the grid filters from your code through the grid state.
If you want to set an initial state to the Grid, use a similar snippet, but in the
OnStateInit event
Set filtering programmatically
@* This snippet shows how to set filtering state to the grid from your code
Applies to the FilterMenu mode *@
@using Telerik.DataSource;
<TelerikButton ThemeColor="primary" OnClick="@SetGridFilter">set filtering from code</TelerikButton>
<TelerikGrid Data="@MyData" Height="400px" @ref="@GridRef"
Pageable="true" FilterMode="@GridFilterMode.FilterMenu">
<GridColumns>
<GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
private TelerikGrid<SampleData> GridRef { get; set; }
private async Task SetGridFilter()
{
GridState<SampleData> desiredState = new GridState<SampleData>()
{
FilterDescriptors = new List<IFilterDescriptor>()
{
new CompositeFilterDescriptor()
{
FilterDescriptors = new FilterDescriptorCollection()
{
new FilterDescriptor() { Member = "Id", Operator = FilterOperator.IsGreaterThan, Value = 5, MemberType = typeof(int) },
new FilterDescriptor() { Member = "Id", Operator = FilterOperator.IsLessThan, Value = 20, MemberType = typeof(int) },
},
LogicalOperator = FilterCompositionLogicalOperator.And
},
new CompositeFilterDescriptor()
{
FilterDescriptors = new FilterDescriptorCollection()
{
new FilterDescriptor() { Member = "Team", Operator = FilterOperator.Contains, Value = "3", MemberType = typeof(string) },
}
}
}
};
await GridRef.SetStateAsync(desiredState);
}
private IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
If you want to alter the filters for a specific column, do not use more than one
FilterDescriptorinFilterRowmode, and more than twoFilterDescriptorsinFilterMenumode. Otherwise additional descriptors will not show up in the UI. This means that you may need to replace or modify an existing descriptor, rather than add a new one.Inactive filter descriptors in
FilterMenumode are distinguished by theirnullValue.
Customization
The Grid allows you to customize the default behavior of the Filter Menu in a couple ways:
Configuring the Filter Menu
You can override the default Filter Row behavior for each column through the following property 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. The provided default filter operator will be applied for both filters in the menu. |
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. |
Configure the Filter Menu
@*Customize the Filter Menu*@
@using Telerik.DataSource
<TelerikGrid Data="@MyData"
Height="400px"
Pageable="true"
FilterMode="@GridFilterMode.FilterMenu">
<GridColumns>
<GridColumn DefaultFilterOperator="FilterOperator.IsEqualTo"
Field="@(nameof(SampleData.Id))" Width="120px" />
<GridColumn DefaultFilterOperator="FilterOperator.StartsWith"
Field="@(nameof(SampleData.Name))" Title="Employee Name" />
<GridColumn DefaultFilterOperator="FilterOperator.Contains"
Field="@(nameof(SampleData.Team))" Title="Team" />
<GridColumn DefaultFilterOperator="FilterOperator.IsGreaterThanOrEqualTo"
Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
</GridColumns>
</TelerikGrid>
@code {
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
{
Id = x,
Name = "name " + x,
Team = "team " + x % 5,
HireDate = DateTime.Now.AddDays(-x).Date
});
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
public string Team { get; set; }
public DateTime HireDate { get; set; }
}
}
Filter Menu 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 Menu Template article.