Tree in Advanced DataGrid Example

23 October 2009

Line Break

Author: Arjan (47 Articles) - Author Website

Arjan is a SAP Consultant specialized in ABAP and Front End development techniques like Web Dynpro, Adobe Interactive Forms, Flex and AIR. In his free time he likes to create examples for Flex-Blog and other applications using Flex, AIR and PHP. Other hobbies are movies and music. He is also the co-owner of Flex-Blog.com.

A Flex Builder Pro license adds some cool additional components to the standard collection. Examples are charts and the AdvancedDataGrid control, which i’m gonna use in this example. Adobe defines the AdvancedDataGrid as follows:

The AdvancedDataGrid control expands on the functionality of the standard DataGrid control to add data visualization features to your Adobe Flex application. These features provide greater control of data display, data aggregation, and data formatting. The AdvancedDataGrid control is like a List control except that it can show more than one column of data, making it suited for showing objects with multiple properties.

Ok, sounds cool. Lets say I want to display my data as a Tree inside the AdvancedDataGrid, is this possible? Ofcourse it is. It actually isn’t all that hard too, you just need a dataprovider of a specific type and and XML that describes the hierarchy that you want to visualize in your AdvandedDataGrid.

To create the dataprovider, you need two variables, one of type XML (decribes the hierarchy you want to display) and one of type HierarchicalData:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

[Bindable]
private var companyHierarchy:HierarchicalData;

private var companyData:XML = <data>
<company name="NL for Business">
<department name="For Me">
<employee name="Employee Number One" func="Developer"/>
<employee name="Employee Number Two" func="Visual Designer"/>
<employee name="Employee Number Three" func="Architect"/>
</department>
<department name="In Control">
<employee name="Employee Four" func="SOA Specialist"/>
<employee name="Employee Five" func="BPM Specialist"/>
</department>
</company>
<company name="Adobe">
<department name="Sales & Marketing">
<employee name="Employee Number One" func="Sales Manager"/>
<employee name="Employee Number Two" func="Manager"/>
<employee name="Employee Number Three" func="Sales Manager"/>
</department>
<department name="Product Management">
<employee name="Employee Four" func="Product Manager"/>
<employee name="Employee Five" func="Product Manager"/>
</department>
</company>
</data>;

The next step is to instantiate the HierarchicalData object based on your XML, lets do that on the initialize event (don’t forget to add the method call in your application tag):

1
2
3
4

private function init():void
{
companyHierarchy = new HierarchicalData(companyData.company);
}

Ok, that’s all the Actionscript coding we need, now we only need an AdvancedDataGrid to actually show the Tree. Just create one with the HierarchicalData variable as the dataprovider (I put the displayItemsExpanded=”true” attribute in there as well so it will open all nodes in the hierarchy):

1
2
3
4
5
6
7
8
9
10
11
12

<mx:AdvancedDataGrid id="companyADG"
dataProvider="{companyHierarchy}"
width="500"
height="500"
displayItemsExpanded="true">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="@name"
headerText="Companies"/>
<mx:AdvancedDataGridColumn dataField="@func"
headerText="Function"/>
</mx:columns>
</mx:AdvancedDataGrid>

That’s it, you’re done. Pretty simple huh? Take a look at styling tree labels to make it all even more fancy. To see it all in action, take a look at the sample application. To view the complete source, use right mousebutton > view source in the sample application.

Written by Arjan · Filed Under Examples

Was this post useful to you?

Please rate this post, follow us @ twitter, or link to this page from your website!

(4 votes, average: 3.75 out of 5)

Loading ...

76306b7c5fdb556b6489b38717e3f264delicious

Comments

10 Responses to “Tree in Advanced DataGrid Example”

Luke on November 1st, 2009 4:13 am

Hello, I’m getting started w/this control and the examples use actionscript objects or xml that uses leaf nodes for the rows inside the groups and the leaf node attributes for the columns.

I’m consuming xml from a REST api where the rows I want in groups aren’t leaf nodes, the leaf nodes represent my columns. From what I’ve found so far it looks like I need to transform my XML to get it in the form mentioned previously. I was wondering if you’ve seen a configuration that could handle my xml with transforming it.

I’m also looking for some sort of dynamic grouping, like drag-n-drop of a column heading to create new/multiple dynamic groupings. Have you seen anything like this already done using flex 3?

Thank you,

-Luke
Arjan on November 3rd, 2009 12:02 pm

I think that transforming the XML is the best thing you can do. It’s pretty easy using E4X. I don’t know if you have any experience with it? Maybe I’ll write an example about E4X. If you give me a sample of the structure of your XML I can help you to figure out a solution.

Your second question is possible, but I’m not sure if you can do it by drag&dropping of column headers. Dynamic grouping can be done by using GroupingCollection / Grouping / GroupingField.

Good luck.
kimkiyong on November 8th, 2009 2:29 am

thank you!
I need sample code for datagrid.
Miguel on July 12th, 2010 11:21 pm

Hi Arjan,

Nice sample. I started developing some components to be used in Xcelsius from SAP. I’m facing some difficults to develop a datagrid to be rendered in Xcelsius via class file (.as). Do you know where I can get something to help? Thanks, Miguel
Deval on September 9th, 2010 7:21 am

What a Wonderful thing u have provided
Henrik Winther Jensen on December 8th, 2010 4:07 pm

Very nice.
Thank you.
Tom on February 9th, 2011 3:53 am

Hello thanks for the great example

actually i need some help about creating a datagrid, what i need is to
customize the header areas which i tried to handled it by using stuff like:

ect

but this is not working and i dont know why !

can you help me how to do it ?

what i want is for example : in each header to put a textArea so i can
edit the header texts at any time for example

and i dont know how to handle this problem : (

anyway thanks alot

tom
Anirudha on April 13th, 2011 7:57 am

you can add dynamically department and employees

private function addDept(nodeName:String):void {
var newNode:XML = ;
newNode.@name = nodeName;
var dept:XMLList =companyData.company.(@name == “XYZ”);
if( dept.length() > 0 ) {
dept[0].appendChild(newNode);
}
}

private function addEmployee(nodeName:String, parentName:String, val:String):void {
var newNode:XML = ;
newNode.@name = nodeName;
newNode.@value = val;
var dept:XMLList =companyData.company.department.(@name == parentName);
if( dept.length() > 0 ) {
dept[0].appendChild(newNode);
}
}
wmao on June 24th, 2011 6:23 pm

Hi, I’m a newbie to flex. I’m just wondering if it’s possible to put the tree in the datagrid header. So we can have something like this:

child1 child2
| |
node1——-|——–|
—————————————————————
+node1
|—child1
|—child2
+node2
|—child1
|—child2
Nathan5x on August 25th, 2011 6:50 am

Hi Arjan,

Could you please share some sample on Tree ItemRenderer in AdvancedDataGrid ?

There are cases where we need to write ItemRenderer for the Tree in AdvancedDataGrid.