3
votes

For Kendo UI Grid, there is the option of setting filterable to row or menu or both. I was wondering if it was possible to set some columns to be row(only as row), while others display as menu(only as menu). Preferably not with css.

Example: I want field name to be a row filter, while age to be a menu filter

<script>
      $("#grid").kendoGrid({
  dataSource: ...
  filterable: { 
    operators: {
      string: {
        startswith: "Starts with",
        eq: "Exact Client Name",
        contains: "contains"
      },
      number: {
        gte: "From",
        lte: "Before"
    }
   },
   mode: "row" },
   column: [ { field: "ClientName", title: "Client Name", width: 150, type: "string" , attributes: { style: "text-align:left;" }, filterable: { messages: { info: "Show clients that: " }, extra: false} },
             { field: "Month", title: "Month", width: 78, type: "number", attributes: { style: "text-align:center;" }, filterable: { messages: { info: "Show month(s): ", and: "To" }, ui: monthFilter, mode: "menu" } }
   ]
 });
</script>
1
Please show some evidence of research and examples of what you've tried. Then we can helpDevDonkey

1 Answers

6
votes

I figured out a solution. Probably not the best solution, but for anyone that needs it for future reference, I used the follow solution. set filterable mode to mode: "row, menu"

   filterable: {
      cell: { enabled: false}   
    }

to eliminate unwanted rows filters. And using jquery

databinding: function(e){
     $("#grid-name .k-grid-filter .k-filter").css('display', 'none');
     $("#grid-name ").find("[data-field=Month]>.k-grid-filter .k-filter").css('display', 'block');
}

to eliminate unwanted column menu filters.