Only one filter option in FilterMenu

Environment

Product Grid for Blazor

Description

I want simple filtering options in the 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

You can use CSS to hide the elements that provide the and/or secondary conditions:

Hide And/Or filter options in FilterMenu

@* These CSS rules hide the second component wrappers *@

<style>
    .k-filter-menu-container .k-widget.k-dropdown,
    .k-filter-menu-container .k-state-empty:nth-of-type(2n),
    .k-filter-menu-container .k-datepicker:nth-of-type(2n),
    .k-filter-menu-container .k-numerictextbox:nth-of-type(2n) {
        display: none;
    }

        .k-filter-menu-container .k-widget.k-dropdown:first-of-type {
            display: block;
        }
</style>

<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; }
    }
}
In this article
Not finding the help you need? Improve this article