Only one filter option in FilterMenu

Updated on Dec 10, 2025

Environment

Product

Grid for Blazor, TreeList for Blazor

Description

I want simple filtering options in the Grid filter menu - both for my uses and my backend. How do I remove the extra conditions so it behaves like the filter row and does not have extra and/or operators?

Before and after results

Solution

There are two options:

• Use a custom filter template. It provides full flexibility over the interface and building the filter descriptor.
• Use custom CSS to override the theme and hide the elements that provide the and/or secondary conditions. The example below demonstrates this approach.

CSS

.k-filter-menu-container > .k-button-group,
.k-filter-menu-container > span:nth-child(n+3) {
	display: none;
}

Hide And/Or ButtonGroup and second filter option in the Grid/TreeList FilterMenu with CSS

<TelerikGrid Data="@GridData"
             FilterMode="GridFilterMode.FilterMenu">
    <GridColumns>
        <GridColumn Field="@nameof(Product.Name)" Title="Product" />
        <GridColumn Field="@nameof(Product.Price)" />
        <GridColumn Field="@nameof(Product.ReleaseDate)" Title="Release Date" DisplayFormat="{0:d}" />
        <GridColumn Field="@nameof(Product.Discontinued)" />
    </GridColumns>
</TelerikGrid>

<style>
    .k-filter-menu-container > .k-button-group,
    .k-filter-menu-container > span:nth-child(n+3) {
        display: none;
    }
</style>

@code {
    private List<Product> GridData { get; set; } = new();

    protected override void OnInitialized()
    {
        var rnd = Random.Shared;

        for (int i = 1; i <= 7; i++)
        {
            GridData.Add(new Product()
            {
                Id = i,
                Name = $"Product {i}",
                Price = rnd.Next(1, 100) * 1.23m,
                ReleaseDate = DateTime.Today.AddDays(-rnd.Next(1, 3650)),
                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 DateTime ReleaseDate { get; set; }
        public bool Discontinued { get; set; }
    }
}