New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Grid Multiple Checkbox Filtering in Row Mode


Product Version 2023.2.829
Product Grid for ASP.NET Core


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?


Here are the required steps to achieve the custom scenario:

  1. Enable the MultiCheckbox Filtering with the desired column. columns.Bound(p => p.ShipName).Filterable(ftb => ftb.Multi(true)).Width(500);
  2. Subscribe to the DataBound Event of the Component. .Events(e=>e.DataBound("onDataBound"))
  3. When the Grid initializes make sure to enable both its Menu and Row filtering with the setOptions method.
        var grid = $("#grid").data("kendoGrid");
            filterable: {
                mode: "menu, row"
  1. 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; // show the Multi Checkbox Menu element
            $("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
  1. Style the icon button.
      .nameFilter > .k-grid-filter-menu {
        height:15px !important;
        padding: 0;
        left: 0;
        bottom: 0px !important;

Review the behavior in this Telerik REPL example.

More ASP.NET MVC Grid Resources

See Also

In this article