Kendo grid custom checkbox filtering for comma separated values

6 posts, 1 answers
  1. Andrey
    Andrey avatar
    9 posts
    Member since:
    Apr 2016

    Posted 12 May 2016 Link to this post

    In my KendoUI grid I have a column with cell values like

    • ABC, BCD, CDE
    • BCD, QWE, ZXC
    • ABC, ZXC, POI
    • etc

    I want this column to have filtering with multiple checkboxes so I put 

    filterable: { multi: true }
     in that column config. But I want only unique values for each checkbox. So it should be

    • ABC
    • BCD
    • CDE
    • QWE
    • ZXC
    • POI

    I guess I need to implement custom filtering for that. It's like I need to parse the cell content for comma separated values and put each of that value on a separate filter checkbox. Any advise how to do that?

  2. Andrey
    Andrey avatar
    9 posts
    Member since:
    Apr 2016

    Posted 13 May 2016 in reply to Andrey Link to this post

    So I can get an array of unique values like so:

    var arrayValues = [], i;
    var data = gridData.dataSource._data;
    for(i = 0; i < data.length; i++){
    var sep = data[i].productType.split(', ');
    arrayValues = arrayValues.concat(sep);
    }
    arrayValues.sort();
    for(i = arrayValues.length - 1; i > 0; i--) {
    if(arrayValues[i] == arrayValues[i - 1]) {

    arrayValues.splice(i, 1);
    }
    }
    console.log(arrayValues);


    How do I then apply this array to filter checkboxes? So that I have a separate checkbox for each value and it will work as "contains" filter.
  3. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 13 May 2016 Link to this post

    Hi Andrey,

    You could set the dataSource as shown in the following example from our help article:
    However, since the built-in filter expression will be with "equalTo", changing only the dataSource will not do the trick and you will have to customize the filter for the column and manually build the filter expression. You can take a look at the following HowTo article for reference:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  4. Andrey
    Andrey avatar
    9 posts
    Member since:
    Apr 2016

    Posted 16 May 2016 in reply to Konstantin Dikov Link to this post

    Thank you, Konstantin!
    This was very helpful.
  5. Andrey
    Andrey avatar
    9 posts
    Member since:
    Apr 2016

    Posted 16 May 2016 Link to this post

    So I managed to make a custom filter with unique values parsed from comma separated values and it works fine. But when I try to export to Excel I still see those initial values like "ABC, BCD, CDE" etc.
    Is it possible to apply the same filter to Excel?
  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 18 May 2016 Link to this post

    Hello Andrey,

    I have tested the example for custom checkbox-filter menu with export to Excel and the filtering is working correctly for the exported file as well:
    Can you please create a dojo example that replicates the issue, so we can test it locally?


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top