Edit this page

Add Multi-Check Filter to Grid in Row Mode

Environment

Product Progress Kendo UI Grid

Description

My Grid uses row mode for filtering. I need the FilterMultiCheck to appear in the filter row and not in the header.

filterable: {  
    mode: 'row'  
},

How can I implement a multi-selection filter in a column Grid which is in a row-filterable mode?

Suggested Workarounds

The Kendo UI Grid does not provide a built-in solution for achieving this behavior. However, you can still work around the issue.

Move the built-in menu to the filter row and, if not needed, hide the rest of the filter menus from the headers:

  1. Set filterable to mode "menu, row"by using use column.filterable.multi.
  2. Add an event handler to the dataBound event of the Grid.
  3. Look for the MultiFilterCheck in the header.
  4. Find the desired filter row cell and replace its content with MultiFilterCheck.
  5. To give it the same look and feel as the neighboring cells, wrap it in a span through "class='k-button k-button-icon k-dropdown-wrap".
  6. Copy the following code:

    dataBound: function(e){
    
      var multifilter = e.sender.thead.find("th[data-field='name']>a");
      var ageFilter = e.sender.thead.find("th[data-field='age']>a").hide();
    
      if(multifilter){
        $("span[data-field='name']").first().replaceWith(multifilter);
        multifilter.wrap("<span class='k-button k-button-icon k-dropdown-wrap'></span>");
      }
    }
    

For the complete implementation, refer to this Dojo example

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy