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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With