Preserving the open nodes in AdvancedDataGrid after re-grouping
Posted by: Sameer on: November 19, 2008
Consider a scenario in which you want to group some data and display it in an AdvancedDataGrid. Now, you open some nodes. And you want to add summaries to the data. Adding summaries means to re-group the data by calling GroupingCollection.refresh(). But the state of open nodes will be lost as new Objects are created for the group nodes while re-grouping.
I’m posting a sample in which the open nodes are preserved.
Open the sample, click on Group data, open some nodes and then click on Add Summary. The nodes which are open will remain open.
Basically, here I’m giving the same UID for the group nodes as they were before (re-grouping). That’s why, the open state is maintained.
Note: This sample will work only if the grouping fields are same for both groupings. It’ll need some tweaking in case the grouping fields are changed.
40 Responses to "Preserving the open nodes in AdvancedDataGrid after re-grouping"
November 25, 2008 at 10:45 am
If the SummaryField’s label is same as the dataField of the column in which the summary is shown, you can sort the grid by summary without much hassle.
Make sure you follow these steps –
adg.dataProvider = gc; // assign the GroupingCollection
adg.validateNow(); // call validateNow()
adg.dataProvider.sort = sort; // assign the sort
adg.dataProvider.refresh();
November 25, 2008 at 4:37 pm
Hi Sameer,
Thanks for the suggestion it worked.
One more thing I want to sort the column which contains the grouped data .As suggested by you iam using
g.label=d2[h].label
gf = new GroupingField();
gf.name = d2[h].label;
g.fields.push(gf);
where g is my grouping and gf is grouping field,but iam still not able to sort my grouping column.It is just sorting the data inside the group(data under various groups) but group order remains the same.
Thanks in advance.
December 24, 2008 at 12:06 pm
Hi sameer,
I need ur help again.I using a group collection to display my data in the grid.
Now my requirement is whenever user selects ne node in the grid i need to show the content of that node in a pie chart or a pie chart corresponding to the content of the node.
How can i get the selected node from the group collection.
Thanks in advance.
December 28, 2008 at 11:49 am
AdvancedDataGrid.selectedItem property will give you the selected node.
This example might help you –
http://flexpearls.blogspot.com/2007/09/displaying-charts-in-advanceddatagrid.html
January 17, 2009 at 6:06 pm
hi Sameer.
I’m confused. In documentation I found the next description of property selectedIndex:
The index in the data provider of the selected item.
In dataProvider I have just one record. But in the ADG this record is on the second position, cause the first show me the group.
When I’m clicking on the non grouping item, the selectedIndex property come as 1, not as 0.
Can you tell me why and how can I get the right selectedIndex, the index of selected item the dataProvider, in my case in ArrayCollection.
January 18, 2009 at 10:43 am
You are using GroupingCollection to group the items. Now, the dataProvider of the AdvancedDataGrid is the GroupingCollection containing the grouped item also.
So, the first item is the grouped item at index 0 and the non-grouped item is at index 1.
You can get the selectedItem and find its position in the source that you provided to the GroupingCollection.
January 22, 2009 at 3:07 pm
Hi Sameer,
I have an advanceddatagrid and have to open few nodes when its created. Please see my code below. I’m getting the first trace and not getting the second one. Whats the problem with my ‘IHierarchicalCollectionViewCursor’ declaration? My adg is getting created. Thanks in advance.
private function createGrid():void{
adg = new ADGbgColor();
adg.rowCount = totalRows
adg.groupedColumns = createColumns
hd = new HierarchicalData()
hd.source = myXML.elements()
adg.dataProvider = hd
adg.horizontalScrollPolicy = ScrollPolicy.AUTO
adg.lockedColumnCount=1
this.addChild(adg);
var dh:HierarchicalCollectionView = adg.dataProvider as
HierarchicalCollectionView;
trace(“======coming here”)
var cursor:IHierarchicalCollectionViewCursor = dh.createCursor()
as IHierarchicalCollectionViewCursor
trace(cursor.currentDepth+”====end”)
}
January 23, 2009 at 7:21 pm
Hi Sameer,
Is there a way to make cells clickable and pass information of the cells in the row to a new component opened up?
I noticed that cellSelectionData hash table is private in AdvancedDataGrid and there doesn’t seem to be a way of directly accessing all of its contents.
Any pointer/help will be appreciated.
-Thanks
January 26, 2009 at 7:30 pm
set selectionMode=”singleCell”. You can get the row index and column index of the selected cell using adg.selectedCells property.
Get the item in the dataProvider corresponding to the selected row/column.
February 12, 2009 at 7:08 pm
Hello, one more time, Sameer!
And one more question i have.
I have 2 ADGs, that are using as dataProvider one ArrayCollection but very large. Now, in this situation, I need to synchronize the navigation for this 2 ADGs. The selectedItem I’ve already done. Now I’m trying to do the same with the groupItem on expand and collapse. I get the AdvancedDataGridEvent on itemOpening and itemClose. After that I’m not sure what to do next. What I need is to get the Index of the groupItem in the active for this moment ADG and to translate the state to the second ADG’s groupItem. Maybe the way is not correct and its not necessary to listen the itemOpening and itemClose events.
Help!
Thanks in advance! Good luck.
February 12, 2009 at 8:42 pm
If I understand correctly, you want to synchronize the opening and closing of the items in the two grids. If you open an item in the first grid, it should reflect in the second one and vice-versa.
To do this, just make sure that both the grids have the same dataProvider. For example, if you have two grids adg1 and adg2 and you have assigned GroupingCollection to adg1.dataProvider.
Then, assign adg1’s dataProvider to adg2’s dataProvider after grouping is done. -
gc.refresh(); // call refresh
adg1.validateNow(); // validate, let the dataProvider to be set
adg2.dataProvider = adg1.dataProvider as IHierarchicalCollectionView; // assign the dataProvider
This works because both the grids are using the same instance of dataProvider (IHierarchicalCollectionView).
February 17, 2009 at 11:09 am
Hi Sameer,
My ADG collapses when I apply filters and I need it to expand all nodes that
were opened before.
I tried something like this :
var openNodes:Object = IHierarchicalCollectionView(adg.dataProvider).openNodes;
hd.source = myXML.elements()
adg.dataProvider = hd
adg.validateNow()
IHierarchicalCollectionView(adg.dataProvider).openNodes = openNodes
But it doesn’t work.
How can I solve this problem?
February 17, 2009 at 3:51 pm
Having a uid property in the xml nodes may resolve your issue.
How are you applying filters here?
February 17, 2009 at 4:44 pm
applying filters to the xml and assigning the xml again to the datagrid.
February 27, 2009 at 12:17 pm
I would like to export the visible items in my adg with grouping to excel…It seems somewhat similar to the functionality you have here…
Ideally I would loop through either the ADG and build a table using the visible items (or expanded nodes, summary nodes) or use the grouping collection…
But I am not sure about the syntax…Any help would be greatly appreciated…
February 27, 2009 at 1:43 pm
If you just need the open nodes, use –
var openNodes:Object = IHierarchicalCollectionView(adg.dataProvider).openNodes;
Go through the openNodes variable and do whatever you want.
February 27, 2009 at 2:11 pm
Thanks for your timely response…
I haven’t worked with IHierarchicalCollectionView or OpenNodes before so forgive me if I do not know all the syntax…
The Header section works perfectly as it is based only on the adg…But the details are not showing up in excel…I am sure my syntax in wrong…
Here are the relevant pieces of my code
var adg:AdvancedDataGrid = dgBase as AdvancedDataGrid;
var openNodes:Object = IHierarchicalCollectionView(adg.dataProvider).openNodes;
for(var j:int =0;j<openNodes.numChildren;j++) {
str+=”";
for(var k:int=0; k < adg.columns.length; k++) {
if(adg.columns[k].labelFunction != undefined) {
str += “”+adg.columns[k].labelFunction(openNodes.getItemAt(j),adg.columns[k].dataField)+”";
} else {
str += “”+openNodes.getItemAt(j)[adg.columns[k].dataField]+”";
}
}
str += “”;
str+=”";
}
Thoughts?
February 27, 2009 at 2:13 pm
The HTML tags where stripped out of my last message
lines with str+= “”; should have html table tags inside
February 27, 2009 at 8:37 pm
So, openNodes does not have any numChildren property. You can iterate over it using the for-each loop like –
for each (var item:* in openNodes)
{
// do things here
}
Also, there is no property like getItemAt() in openNodes. Its an Object.
In the above loop, item will be having all the properties.
Try debugging it to see what’s inside it.
Let me know if you face any issues.
March 19, 2009 at 3:57 am
Sameer, thanks for the helpful tutorial! Can you help me get the value of the label on the grouped items? I am using this code but it returns nothing in the Alert window.
private function adg_itemClick(e:ListEvent, adg:AdvancedDataGrid):void{
var item:Object = AdvancedDataGrid(e.currentTarget).selectedItem;
adg.expandItem(item, !adg.isItemOpen(item), true);
Alert.show(item.label.text);
}
March 19, 2009 at 10:47 am
Use item["GroupLabel"] to get the label.
Also you can set a custom label by setting Grouping.label property while creating the GroupingCollection.
March 19, 2009 at 9:07 pm
Hi Sameer,
Can you tell me how to get the value of item.GroupingField?
When I select an item, I want to know the groupingfield of that item.
Thanks a Lot
mshetty
March 21, 2009 at 12:17 am
Thanks for your answer Sameer! That worked well!
Manasa, are you looking for the value/label of the groupingField that you click on? I think you can use this code to get what you’re looking for…
add the itemClick to your AdvancedDataGrid…
and this function….
private function adg_itemClick(e:ListEvent, adg:AdvancedDataGrid):void{
var item:Object = AdvancedDataGrid(e.currentTarget).selectedItem;
adg.expandItem(item, !adg.isItemOpen(item), true);
Alert.show(item["GroupLabel"]);
}
July 1, 2009 at 9:03 pm
If I reload the data for the datagrid from the server the code doesn’t work 
private function handleGetApplicationData(event:ResultEvent):void
{
vo.tradesResult=event.result.DEALS as ArrayCollection;
if (deals.dataProvider != null)
{
var openNodes:Object=IHierarchicalCollectionView(deals.dataProvider).openNodes;
gcTrades.refresh();
setupSlider();
deals.dataProvider=gcTrades;
deals.validateNow();
IHierarchicalCollectionView(deals.dataProvider).openNodes=openNodes;
}
else
{
gcTrades.refresh();
setupSlider();
deals.dataProvider=gcTrades;
}
}
July 2, 2009 at 9:36 am
Are you setting up the UID for the group nodes just like I’ve shown in the sample?
July 8, 2009 at 4:05 pm
Hi Sameer,
i have similar problem for remembering the open nodes of advanced datagrid .i m very new to this tool .By going through ur post and these suggestion i tried to do it own but couln,t succeed.So could u pls help me if u have any relevent code for this here i will just detail my problem.
Actually i have to save the state of my Advanced datagrid as if one row is opened it should be opened once the user is logged in agin.Maens if i checked for two rows and log out and once wil be back these two nodes should be remain open. How can i do it with my web application. As how can i save state for every user .
Thanks
July 13, 2009 at 2:47 pm
You can use SharedObject to store the open nodes for a particular user. Also, make sure to set up the UID as shown in the sample.
October 7, 2009 at 12:53 pm
I need to do different grouping for each level in the tree, the user will right click on the icon and select which grouping is relevant for the specific level, is it possible?
October 7, 2009 at 1:52 pm
Do you mean multiple level of Grouping?
Which icon should the user right click for selecting the grouping?
October 7, 2009 at 9:06 pm
Hi sameer,
Same mentioned issue.I have adg with hierrarchical data.I am keeping the opennodes XML when making the server call.But not able to open with expandItem(previous XML) .What could be wrong.Thanks in advance
October 13, 2009 at 10:08 am
So, the two xmls are different. You need to have a unique property in your xml. Try these steps –
1. Add a new property – lets say uid which is unique for every item. You can change it to any property which you think will be unique.
2. Since the item fetched from the Server will be different from the items already present. Find an item in the already existing items which has the same uid as that of the item you got from the Server. Now expand the item.
November 3, 2009 at 9:55 pm
Hi Sameer,
What ever I do the values from the Array ddArr does not get populated in the PopUPMenu Button.
I have an advanced data grid , with 8 columns one of the columns i want the 8 th column as a POPUPMenu Button, and when I click on the menu item it should navigate to a url value which is in the Array dArr. Array dArr has 2 values ,how can i do this I have tried many things.
Array dArr has the values [dd.label,dd.url] and some valuses in the array has more than one occurence, I mean [dd.label1,dd.url1],[dd.label2,dd.url2].
The values to be populated in the POPUPMenuButton , i have in an array ddArr.
please help me out.
.hStyle { fontWeight:bold; fontFamily:Verdana; fontSize:12; align:center; }
0 )
{
ddLabel= ddRest.substring( 0, ddidx );
ddRest= ddRest.substring(ddidx + 1 );
ddidx = ddRest.indexOf(“|”);
if( ddidx > 0)
{
// ddUrl= ddRest.substring(ddidx + 1 );
ddUrl= ddRest.substring(0, ddidx );
ddRest= ddRest.substring(ddidx + 1 );
ddidx = ddRest.indexOf(“|”);
}
dObj.label= ddLabel;
dObj.url= ddUrl;
ddArr.addItem(dObj);
}
popUpB=new PopUpMenuButton();
myMenu = new Menu();
myMenu.labelField = “Action”;
myMenu.showRoot = true;
myMenu.width = popUpB.width;
myMenu.selectedIndex = 0;
myMenu.dataProvider = ddArr;
// myMenu.addEventListener(“itemClick”, itemClickHandler);
popUpB.popUp = myMenu;
dp.addItem( { “Index”:xd[0], “Service”:xd[1], “Priority”:xd[2], “Current SLA”:xd[3],”Health”:xd[4], “Quality”:xd[5],
“Risk”:xd[6], “Avail”:xd[7], “OpMode”:xd[8], “dd”:popUpB} );
dp = dpSrv;
gc.source=dp;
gc.refresh();
]]>
<!– –>
<!– –>
thanks in advance,
Tom.
November 6, 2009 at 9:57 am
I don’t think I got your issue. Can you explain a little more.
A simple sample will help.
FeedBurner
November 25, 2008 at 9:58 am
Hi Sameer,
Iam using advanced DataGrid in which my data provider is a group collection.I am also using SummaryRow which is placed at “group” level. Now my Client wants that Initial sort order should be desecending based on SummaryRow. I have also used label function for summaryRow.I am able to sort data by my custom sort function but i dont know how to initially sort the based on summaryRow.
I tried sorting underlying FlatDataProvider but that is not working.
My summaryRow contains Financial Data like $145,45,89.
Pleae help its urgent….
Thanks in advance.