[CLOSED] Preserve expanded group using DataView

[rthiney]

Hi,
I have a dataview, just like the one in this example. https://examples2.ext.net/#/DataView/Advanced/Grouping/
How can I preserve the expanded groups on a reload of the store that it binds too?

[Baidaly]

Hello!

Sorry, what do mean by preserve? You want to preserve groups expanded or you want to have groups, which are expanded, in the DataView after store reloading?

[rthiney]

Hello!

Sorry, what do mean by preserve? You want to preserve groups expanded or you want to have groups, which are expanded, in the DataView after store reloading?

Never mind, I figured it out..

I define my groups as such:

<div id="GRP_{TitleClean}" class="group-header collapsed"  >
<div onclick="KeepTrackOfGroups('{TitleClean}',$('#GRP_{TitleClean}').attr('class'));">{Title}</div>
--CONENT HERE--
</div>

and a litle JS/Jquery to manage:

        function GroupControls(title, cls)
        {
            this.Title=title;
            this.Class=cls;
        }
        var groupArray = [];
        function KeepTrackOfGroups(title,cls)
        {
            //if the class comes in as group-header collapsed, then the user just opened it...so its expanded.
            //if the cls comes in as group-header, then the user just closed it.
            //we just need to keep track of the ones that are opened and make sure that when the store is reloaded, we re-expand them.
            var gc = new GroupControls(title,cls);
            if (cls=='group-header collapsed')  
                groupArray.push(gc);  
            else 
                groupArray.pop(gc);  
        }


       //call this on load listener with 500 delay of store....
        function ReOpenGroups()
        {
            groupArray.forEach( function(s) { 
                $('#GRP_' + s.Title).removeClass('collapsed') 
            } ); 
        }