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. Image for the cookie policy date
close icon

How can I collapse grouped columns based on a row status


I want to collapse all the groups that only group one row (and apply another row field condition..) and let the other groups be expanded.

I think the this.groupModule.expandCollapseRows(); on the dataBound event is related, right?


3 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team August 8, 2019 09:42 AM UTC

Hi Pablo, 

Greetings from Syncfusion support. 

Yes, we can achieve this requirement using the gridObj.groupMoudle. expandCollapseRows() method in Grid. 

In the below code example, we have collapse some groups based on group key values (“Berlin, Madrid”) in an external button click event. 

        <ejs-button id="collapseGroup" content="Collapse_Grouped_Rows"></ejs-button> 
        <ejs-grid id="Grid" dataSource="ViewBag.datasource" allowGrouping="true"> 
            <e-grid-groupsettings columns="@(new string[] { "ShipCity" })" showGroupedColumn="true"></e-grid-groupsettings> 
    document.getElementById('collapseGroup').addEventListener('click', function (args) { 
        var obj = document.getElementById('Grid').ej2_instances[0]; 
        var collapsableKeyValue = ["Berlin", "Madrid"]; 
        for (var i = 0; i < collapsableKeyValue.length; i++ ) { 
            var collapseElement = obj.getContentTable().querySelectorAll("td[ej-mappingvalue= '" + collapsableKeyValue[i] + "']")[0]; 

We have prepared a sample and it can be downloadable from the below location. 

Thavasianand S. 

PK pk August 12, 2019 06:14 PM UTC


BS Balaji Sekar Syncfusion Team August 13, 2019 06:14 AM UTC

Hi Pablo, 
Thanks for your update,  
We glad to hear that your problem has been resolved. 
Please get back to us if you need further assistance. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon