PDA

View Full Version : [CLOSED] Preserve expanded group using DataView



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

Baidaly
Oct 13, 2013, 8:04 AM
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
Oct 13, 2013, 12:46 PM
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_{TitleCle an}').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')
} );
}