Grid Filter Menu

The FilterMenu filter mode renders a button in the column header. When you click the button, a popup with filtering options appears. The popup allows you to apply two filter criteria, choose a suitable filter operator and buttons to apply, or clear the filter.

Enabling Filter Menu

Set the FilterMode parameter of the Telerik Grid to GridFilterMode.FilterMenu.

Filter Menu in Telerik Grid

@* Filter menu in the column header *@

<TelerikGrid Data=@GridData FilterMode="@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; }
    }
}

Filter From Code

To learn how to programmatically filter the Grid, refer to the Grid State documentation article.

If you want to set an initial state to the Grid, use a similar snippet, but in the OnStateInit event

Customization

You can customize the default behavior of the Filter Menu in a couple ways:

Configuring the Filter Menu

You can override the default Filter Menu 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; }
    }
}

FilterMenuType

You can switch between CheckBoxList and a Menu filtering layout for a particular <GridColumn> by setting the FilterMenuType to FilterMenuType.Menu or FilterMenuType.CheckBoxList.

CheckBoxList

You can render a list of checkboxes instead of the default menu layout. Read the CheckBoxList Filtering article for more information...

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.

See Also

• Grid Filtering Overview
• Live Demo: Grid Filter Menu
• Blazor Grid