Collapse all grouped rows at initial render
17 Feb 20222 minutes 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.
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowGrouping="true" dataBound="bound">
<e-grid-groupsettings columns="@(new string[] {"ShipCountry"})"></e-grid-groupsettings>
<e-grid-columns>
<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column>
<e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="120"></e-grid-column>
<e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" editType="numericedit" width="120"></e-grid-column>
<e-grid-column field="ShipCountry" headerText="Ship Country" width="150" editType='dropdownedit'></e-grid-column>
</e-grid-columns>
</ejs-grid>
<script>
var initial = true;
function bound() {
if (initial === true) {
this.groupModule.collapseAll();
initial = false;
}
}
</script>
public IActionResult Index()
{
ViewBag.DataSource = OrderDetails.GetAllRecords();
return View();
}