Search results

Collapse all grouped rows at initial rendering in ASP.NET MVC Grid control

14 Apr 2021 / 1 minute to read

You can collapse all the grouped rows at initial rendering by using DataBound event with collapseAll method of the grid.

In the below demo, all the grouped rows are collapsed at initial rendering.

razor
collapseall.cs
Copied to clipboard
@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).DataBound("bound").Columns(col =>
{
   col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
   col.Field("Freight").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
   col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
   col.Field("ShipCountry").HeaderText("Ship Country").Width("150").EditType("dropdownedit").Add();

}).AllowPaging().AllowGrouping().GroupSettings(group => group.Columns(new string[] { "ShipCountry" })).Render()

<script>
    var initial = true;
    function bound() {
        if (initial === true) {
            this.groupModule.collapseAll();
            initial = false;
        }
    }
</script>
Copied to clipboard
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}