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

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.

Razor

    columns.Bound(p => p.ShipName).Filterable(ftb => ftb.Multi(true)).Width(500);

Subscribe to the DataBound Event of the Component.
Razor
```
    .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.

CSS

    .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.

Grid Multiple Checkbox Filtering in Row Mode

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also