Grid Multiple Checkbox Filtering in Row Mode
Environment
| Product Version | 2023.2.829 |
| Product | Grid for ASP.NET Core |
Description
I noticed that the Multi Checkbox configuration only has effect when the Grid's FilterMode is set to Menu. Is there a way to use the Multiple Checkboxes in Row FilterMode?
Solution
Here are the required steps to achieve the custom scenario:
- Enable the MultiCheckbox Filtering with the desired column.
columns.Bound(p => p.ShipName).Filterable(ftb => ftb.Multi(true)).Width(500); - Subscribe to the DataBound Event of the Component.
.Events(e=>e.DataBound("onDataBound")) - When the Grid initializes make sure to enable both its Menu and Row filtering with the setOptions method.
$(document).ready(function(){
var grid = $("#grid").data("kendoGrid");
grid.setOptions({
filterable: {
mode: "menu, row"
}
})
})
- In the onDataBound handler, hide the unnecessary menu icons and place the icon that opens the Multi Checkbox Menu in the Row Filtering header.
function onDataBound(E){
var menuFilters = E.sender.thead.find("th>span>a"); //select the menu filters of the columns
var multifilter = E.sender.thead.find("th[data-field='ShipName']>span>a"); // select the element that opens the Multi Checkbox Menu
menuFilters.hide(); // hide the menu filters
multifilter.show(); // show the Multi Checkbox Menu element
if(multifilter){
$("span[data-field='ShipName']").first().replaceWith(multifilter); // replace the row filter with the element that opens the Multi Checkbox
multifilter.wrap("<span class='nameFilter k-button k-button-icon k-dropdown-wrap'></span>"); // wrap the icon with a span to ease styling
}
}
- Style the icon button.
.nameFilter{
height:15px;
}
.nameFilter > .k-grid-filter-menu {
height:15px !important;
padding: 0;
left: 0;
bottom: 0px !important;
}
Review the behavior in this Telerik REPL example.