Custom Filter Row - Check Box List

1 Answer 49 Views
Filter Grid MultiSelect
Top achievements
Rank 1
Vadzim asked on 18 Jul 2022, 05:35 PM


I am implementing Custom Filter Row. The main task is to implement Check Box List in the row filter (multi select).
Could someone please provide information how can I implement Custom Row Filter like Check Box List Filter for Filter menu?


1 Answer, 1 is accepted

Sort by
Hristian Stefanov
Telerik team
answered on 21 Jul 2022, 09:27 AM | edited on 21 Jul 2022, 09:31 AM

Hi Vadzim,

The easiest way that comes to my mind is to use the TelerikCheckBoxListFilter component we expose and bind the desired collection of values.

I have prepared for you a base example to show the idea and the component usage below. You can use the same approach by configuring it in the FilterCellTemplate for Row Filtering wrapped in a scrollable element.

@using Telerik.DataSource

<TelerikGrid Data=@GridData FilterMode="@GridFilterMode.FilterMenu" FilterMenuType="@FilterMenuType.CheckBoxList"
             Height="400px" Width="600px" Pageable="true">
        <GridColumn Field="Id" Filterable="false" Width="80px" />

        <GridColumn Field="Size" Context="context">
            <FilterMenuTemplate >
                <TelerikCheckBoxListFilter Data="@Sizes"

        <GridColumn Field="ProductName" Title="Product" Filterable="false" />

@code {
    public List<SampleData> GridData { get; set; }

    protected override void OnInitialized()
        GridData = Enumerable.Range(1, 70).Select(x => new SampleData
                Id = x,
                Size = Sizes[x % Sizes.Count].Size,
                ProductName = $"Product {x}",
                TestCheckbox = x % 2 == 0 ? true : false

    public class SampleData
        public int Id { get; set; }
        public string Size { get; set; }
        public string ProductName { get; set; }
        public bool TestCheckbox { get; set; }

    public List<NameFilterOption> Sizes =
    new List<NameFilterOption>() { new NameFilterOption { Size = "XS" }, new NameFilterOption { Size = "S" }, new NameFilterOption { Size = "M" } };

    public class NameFilterOption
        public string Size { get; set; }

I hope that covers the desired result. Let me know if the idea is different or if further information is needed.

Hristian Stefanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at

Filter Grid MultiSelect
Asked by
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question