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

<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();
}