Is it possible to have all groups in a grid show as initially collapsed?

[R Brian Lindahl]

I've got a grid with initial grouping set up, and would like to have all the groups collapsed when the page loads.

[Jayaprakash Kamaraj]

Hi Brian, 

Thank you for contacting Syncfusion support. 

We have achieved your requirement using data-bound event of Grid. In this event, we need to call collapseAll method for Collapse all the group caption rows in grid. Please refer to the below help documents and code example. 

 

https://help.syncfusion.com/api/js/ejgrid#events:databound 

 

https://help.syncfusion.com/api/js/ejgrid#methods:collapseall 

 

 

<ej-grid id="FlatGrid" allow-paging="true" allow-grouping="true" action-complete="actioncomplete" group-settings="@(new GroupSettings { GroupedColumns= new List<string>() { "EmployeeID" } })" databound="databound" datasource="ViewBag.dataSource"> 

        <e-columns> 

            <e-column field="OrderID" header-text="Order ID"></e-column> 

            <e-column field="EmployeeID" header-text="Employee ID"></e-column> 

            <e-column field="CustomerID" header-text="Customer ID"></e-column> 

            <e-column field="ShipCountry" header-text="Ship Country"></e-column> 

            <e-column field="Freight" header-text="Freight"></e-column> 

        </e-columns> 

    </ej-grid> 

    </div> 

<script type="text/javascript"> 

     function databound(args) { // initial load 

         this.collapseAll(); 

 

     } 

</script>      

If you want to collapse all the group caption rows in grid while perform paging operation in Grid . We suggest you to use action-complete event of Grid. In this event we need to call collapseAll method when args.requestType as paging. Please refer to the below help document, code example and sample. 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

<ej-grid id="FlatGrid" allow-paging="true" allow-grouping="true" action-complete="actioncomplete" group-settings="@(new GroupSettings { GroupedColumns= new List<string>() { "EmployeeID" } })" databound="databound" datasource="ViewBag.dataSource"> 

        <e-columns> 

            <e-column field="OrderID" header-text="Order ID"></e-column> 

            <e-column field="EmployeeID" header-text="Employee ID"></e-column> 

            <e-column field="CustomerID" header-text="Customer ID"></e-column> 

            <e-column field="ShipCountry" header-text="Ship Country"></e-column> 

            <e-column field="Freight" header-text="Freight"></e-column> 

        </e-columns> 

    </ej-grid> 

    </div> 

<script type="text/javascript"> 

     function databound(args) { // initial load 

         this.collapseAll(); 

 

     } 

     function actioncomplete(args) { 

         if (args.requestType == "paging") { // paging 

 

             this.collapseAll(); 

         } 

 

     } 

</script>      

Sample: http://www.syncfusion.com/downloads/support/forum/130748/ze/ejGridASPCore_childGrid1309087517 

Regards, 

Jayaprakash K.