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