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.
Unfortunately, activation email could not send to your email. Please try again.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 03:24 AM

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.

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.

;