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

[Richard Werning]

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.

https://www.syncfusion.com/forums/140281/how-to-persist-state-of-collapse-expand-ejgrid-grouping

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

https://ej2.syncfusion.com/documentation/grid/grouping/

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

Rich Werning

[Hariharan J V]

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, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1455214608 

Documentations :  

https://ej2.syncfusion.com/javascript/documentation/api/grid/group/#expandcollapserows 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#actionbegin 

https://ej2.syncfusion.com/javascript/documentation/api/grid/#actioncomplete 

 

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 

[Richard Werning]

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. 

[Hariharan J V]

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