This is a migrated thread and some comments may be shown as answers.
Customised Filter Menu in Grid
3 Answers 10 Views
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 10 Sep 2020, 11:35 AM

Hi all,

I'm trying to create a filter menu that allows me to check multiple boxes to search for multiple entries inside a row.

My data looks like the following:

Person | Status
Alice     | ABC DEF KLM
Bob      | DEF HIJ
Charlie | HIJ

What I would like to be able to do is have a filterable option on Status, to allow you to tick boxes for "ABC", "DEF", "HIJ", "KLM". E.g. selecting HIJ will show both Bob and Charlie, and DEF will show both Alice and Bob, selected ABC and DEF will also show Alice and Bob.

I can't find a way using the filterable method to create the desired outcome. 

Any help would be appreciated.

Thanks,

Matt

3 Answers, 1 is accepted

Sort by
0
Accepted
Anton Mironov
Telerik team
answered on 14 Sep 2020, 11:15 AM

Hello Matt,

Thank you for the provided details.

In order to set the multi checkbox filter and use it as described, I would recommend trying the "contains" logic of the Kendo UI Filter. The implementation of this approach could be achieved in the filter method of the grid. Here is an example:

          { field: "Status", filterable: {
            multi: true,
            dataSource: [ { Status: "ABC" }, { Status: "DEF" }, { Status: "KLM" }, { Status: "HIJ" }  ]
          }}
        ],
        filterable: true,
        filter: function(e){
          if(e.field == "Status"){
            e.filter.filters.forEach(function(f){
              f.operator = "contains";
            })
          }
        }

Find the full implementation in the dojo example below:

Furthermore, you can find the following article interesting that describes setting the multi checkbox filter in more details:

Please, give the above approach a try, and let me know if it works for you, or we should look for another solution.

Kind Regards,
Anton Mironov
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 https://learn.telerik.com/.

0
Matt
Top achievements
Rank 1
answered on 21 Sep 2020, 08:41 AM

This is perfect, thank you.

The only issue now is we lose the ability to see which filters were checked, similarly to when you reset the filtering.

Is there anything we can do about that?

Thanks

0
Matt
Top achievements
Rank 1
answered on 22 Sep 2020, 12:52 PM

Ignore me, I followed your KB article and got what I needed. :)

Thank you for your help!

Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Anton Mironov
Telerik team
Matt
Top achievements
Rank 1
Share this question
or