We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

130748 May 30,2017 09:29 PM UTC May 31,2017 07:24 AM UTC ASP.NET Core 1
loading
Tags: Grid
R Brian Lindahl
Asked On May 30, 2017 09:29 PM UTC

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 [Syncfusion]
Replied On May 31, 2017 07:24 AM UTC

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

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


Regards, 

Jayaprakash K. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;