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

How to persist state of expand/collapse of groups during Insert or Delete of records.

When using grouping in a EJ2 grid, if some groups are expanded and others collapsed, when a user does an insert or delete all the groupings revert to being expanded. How can I make it so that the grouping state is persistent during insert / delete, the same way it works when you edit a record?

It doesn't matter if I have .EnablePersistence() enabled or not, the expand/collapse doesn't persist.

I've tried following this EJ1 example, but it doesn't work for EJ2 as I can't get the index of the parent.

I've read through the help on groupings, but it doesn't mention how to persist expand/collapse state:


Thank you, any help you can provide would be appreciated.
Rich Werning

3 Replies

HJ Hariharan J V Syncfusion Team April 8, 2019 10:44 AM UTC

Hi Richard, 

Thanks for contacting Syncfusion support. 

We have analyzed your requirement. We suggest you to use the “expandCollapseRows” method of Grid to achieve this requirement. We have prepared a sample for your convenience, please download it from the link below, 

Documentations :  
 
In the below code, we have bind the “ActionBegin” and “ActionComplete” events of Grid. Based on the “requestType” as “delete”/”save”, in the “ActionBegin” event handler we have stored the “ej-mappingvalue” of the rows which were collapsed previously, and in the “ActionComplete” handler we have used the “expandCollapseRows” method of Grid inside a “setTimeout” function to collapse the previously collapsed rows. 

<div> 
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource)...ActionBegin("ActionBegin").ActionComplete("ActionComplete")...Render() 
</div> 
 
<script type="text/javascript"> 
    var collapsedGroupindex = []; 
    function ActionBegin(args) { 
        if (args.requestType == "delete" || (args.requestType == "save" && args.action == "add")) {     //Check for this condition to make action perform only during delete and add 
            var collapsedrows = document.getElementsByClassName("e-recordpluscollapse"); 
            for (var i = 0; i < collapsedrows.length; i++) { 
                collapsedGroupindex.push(document.getElementsByClassName("e-recordpluscollapse")[i].getAttribute("ej-mappingvalue"));   //push the mapping value of the collapsed rows in a variable. 
            } 
        } 
    } 
    function ActionComplete(args) { 
        if (args.requestType == "delete" || (args.requestType == "save" && args.action == "add")) {   //Check for this condition to make action perform only during delete and add 
            setTimeout(function () { 
                var gridObj = document.getElementById("Grid").ej2_instances[0];    //Get Instance for Grid 
                for (var i = 0; i < collapsedGroupindex.length; i++) { 
                    gridObj.groupModule.expandCollapseRows(document.querySelectorAll("td[ej-mappingvalue='" + collapsedGroupindex[i] + "']")[0]);  //Call the “expandCollapseRows” with the corresponding row index td(selected based on mapping value) element. 
                } 
                collapsedGroupindex = []; 
            }.bind(collapsedGroupindex), 1); 
        } 
    } 
</script> 


Please get back to us if you need further assistance. 

Regards, 
Hariharan 



RW Richard Werning April 8, 2019 01:19 PM UTC

Thank you, that works great. I was close, just couldn't work out the implementation of the "ej-mappingvalue" and expandCollapseRows.

Question for you, why isn't this implemented as part of the EnablePersistence functionality?  I think that retaining the grouping would be expected behavior, especially if you're doing a simple insert or delete. 


HJ Hariharan J V Syncfusion Team April 9, 2019 11:56 AM UTC

Hi Richard, 
As per your suggestion we have added “Provide support to maintain the expand and collapse state during CRUD operation” to our feature request list. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. You can now track the current status of this feature request here https://www.syncfusion.com/feedback/5702/provide-support-to-maintain-the-expand-and-collapse-state-during-crud-operation. 
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. You can also communicate with us regarding the open features any time using our Feature Report page https://www.syncfusion.com/feedback/5702/provide-support-to-maintain-the-expand-and-collapse-state-during-crud-operation
 
Regards, 
Hariharan 


Loader.
Live Chat Icon For mobile
Up arrow icon