Tree in Advanced DataGrid Example
Line Break
Author: Arjan (34 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.
Related posts:
- Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction
- Drag and Drop from DataGrid or AdvancedDataGrid to Tree
- Style Flex Tree Label Example
- Images in DataGrid depending on data
- Change open and close icons on Flex Tree
Written by · Filed Under Examples
Was this post useful to you?
(2 votes, average: 4.50 out of 5)
Loading ...Comments
4 Responses to “Tree in Advanced DataGrid Example”
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
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.
thank you!
I need sample code for datagrid.
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