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

Enable the Menu and Row Filter Mode in the Grid

Environment

Product Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version Created with the 2022.2.802 version

Description

How can I enable both the row and menu filter modes in the Telerik UI for ASP.NET Core Grid?

Solution

To achieve the desired behavior, change the options of the Grid and enable both the menu and row filter modes by using the setOptions() method.


@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID);
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.OrderDate);
    })
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
     )
)

    <script>
        $(document).ready(function () {
            let grid = $("#grid").data("kendoGrid")
            let opt = grid.getOptions();
            opt.filterable = { mode: "row,menu" };
            grid.setOptions(opt)
        })
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on enabling the menu and row filter modes in the Grid.

See Also

In this article