Customised Filter Menu in Grid

[Matt]

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

[Anton Mironov]

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:

• https://dojo.telerik.com/ArEzItik
  

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

• https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains

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

[Matt]

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

[Matt]

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

Thank you for your help!