Customised Filter Menu in Grid

4 posts, 1 answers
  1. Matt
    Matt avatar
    3 posts
    Member since:
    Jun 2014

    Posted 10 Sep 2020 Link to this post

    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

  2. Answer
    Anton Mironov
    Admin
    Anton Mironov avatar
    168 posts

    Posted 14 Sep 2020 Link to this post

    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/.

  3. Matt
    Matt avatar
    3 posts
    Member since:
    Jun 2014

    Posted 21 Sep 2020 in reply to Anton Mironov Link to this post

    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

  4. Matt
    Matt avatar
    3 posts
    Member since:
    Jun 2014

    Posted 22 Sep 2020 in reply to Matt Link to this post

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

    Thank you for your help!

Back to Top