Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction

30 April 2010

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.

I’ve written a few posts about the AdvancedDataGrid, including one where you can show a Tree inside of it. I’ve never written a post about the iconFunction though, so I thought it would be a good idea to do that. This post described how you can use a Tree in an AdvancedDataGrid where the Tree Node icons are dependant of XML node name and other data in the XML element.

In fact it’s quite straightforward, you just have to know how to do it. First, I will create some dummy XML data in my initialize method, from that data, I create an hierarchical data variable that I can use in my AdvancedDataGrid so that it shows a Tree.

Some variables we need:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import mx.collections.HierarchicalData;

[Bindable]
private var dataHierarchy:HierarchicalData;

[Embed(source="assets/dialog-error.png")]
private var iconError:Class;

[Embed(source="assets/dialog-warning.png")]
private var iconWarning:Class;

[Embed(source="assets/weather-clear.png")]
private var iconClear:Class;

[Embed(source="assets/office.png")]
private var iconOffice:Class;

The initialize method:

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
28
29
30
31
32
33
34
35
36
37
38
39
40

private function init():void
{
var i:int;
// Root Node: Corporate Finance
var xmlData:XML = <Finance></Finance>;
xmlData.@itemName = "Corporate Finance";
// Sales node
var sales:XML = <Sales></Sales>;
sales.@itemName = "Corporate Sales";
// Expenses Node
var expenses:XML = <Expenses></Expenses>;
expenses.@itemName = "Corporate Expenses";

// Append Sales and Expenses to Coporate finance
xmlData.appendChild(sales);
xmlData.appendChild(expenses);

var salesItem:XML;

// Add some random sales items
for( i=0; i<5; i++)
{
salesItem = new XML(<item></item>);
salesItem.@amount = Math.round(Math.random() * 100000);
salesItem.@itemName = "Random Sale " + i;
sales.appendChild(salesItem);
}

// Add some random expense items
var expensesItem:XML;
for( i=0; i<5; i++)
{
expensesItem = new XML(<item></item>);
expensesItem.@amount = Math.round(Math.random() * 100000);
expensesItem.@itemName = "Random Expense " + i;
expenses.appendChild(expensesItem);
}
// Greate hierarchy based on created XML
dataHierarchy = new HierarchicalData(xmlData);
}

Now they very simple layout:

1
2
3
4
5
6
7
8
9
10

<s:Button label="Generate New Data" click="init()"/>

<mx:AdvancedDataGrid id="adg" width="100%" height="100%"
dataProvider="{dataHierarchy}" iconFunction="iconFunction">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Finance" width="350"
labelFunction="labelFunction"/>
<mx:AdvancedDataGridColumn headerText="Amount" dataField="@amount" width="150"/>
</mx:columns>
</mx:AdvancedDataGrid>

The label function (declared on the first AdvancedDataGridColumn, to return the node name):

1
2
3
4
5

private function labelFunction(item:XML, col:AdvancedDataGridColumn):String
{
// Return itemName as the label for the node
return item.@itemName;
}

And last but not least, the icon function to return the icon depending on node name and other data (read comments in source for explanation):

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
28
29
30
31
32
33
34
35
36
37
38

private function iconFunction(item:XML):Class
{
var parentName:String;
var parentNode:XML;
parentNode = item.parent();

// Return office icon if node name not equal to item
if( item.name() != "item" )
{
return iconOffice;
}

// Check if parent not null
if (parentNode != null ){
// Get parent name
parentName = parentNode.name();

// Sales below 30000: return error icon
// Expenses below 30000: return clear icon
if( item.@amount < 30000 )
{
return parentName == "Sales" ? iconError : iconClear;
}
// Warning icon: the same threshold for both cases
else if ( item.@amount < 60000 )
{
return iconWarning;
}
// amount is greater than 60000, return clear if sales
// and error if Expenses
else
{
return parentName == "Sales" ? iconClear : iconError;
}
}
// default if none of the above apply
return iconOffice;
}

That’s it! Here’s the sample application followed by the complete source code:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
initialize="init()" width="500" height="400"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="955" minHeight="600" viewSourceURL="srcview/index.html">
<s:layout>
<s:VerticalLayout paddingBottom="5" paddingLeft="5"
paddingRight="5" paddingTop="5"/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.collections.HierarchicalData;

[Bindable]
private var dataHierarchy:HierarchicalData;

[Embed(source="assets/dialog-error.png")]
private var iconError:Class;

[Embed(source="assets/dialog-warning.png")]
private var iconWarning:Class;

[Embed(source="assets/weather-clear.png")]
private var iconClear:Class;

[Embed(source="assets/office.png")]
private var iconOffice:Class;

private function init():void
{
var i:int;
// Root Node: Corporate Finance
var xmlData:XML = <Finance></Finance>;
xmlData.@itemName = "Corporate Finance";
// Sales node
var sales:XML = <Sales></Sales>;
sales.@itemName = "Corporate Sales";
// Expenses Node
var expenses:XML = <Expenses></Expenses>;
expenses.@itemName = "Corporate Expenses";

// Append Sales and Expenses to Coporate finance
xmlData.appendChild(sales);
xmlData.appendChild(expenses);

var salesItem:XML;

// Add some random sales items
for( i=0; i<5; i++)
{
salesItem = new XML(<item></item>);
salesItem.@amount = Math.round(Math.random() * 100000);
salesItem.@itemName = "Random Sale " + i;
sales.appendChild(salesItem);
}

// Add some random expense items
var expensesItem:XML;
for( i=0; i<5; i++)
{
expensesItem = new XML(<item></item>);
expensesItem.@amount = Math.round(Math.random() * 100000);
expensesItem.@itemName = "Random Expense " + i;
expenses.appendChild(expensesItem);
}
// Greate hierarchy based on created XML
dataHierarchy = new HierarchicalData(xmlData);
}

private function labelFunction(item:XML, col:AdvancedDataGridColumn):String
{
// Return itemName as the label for the node
return item.@itemName;
}

private function iconFunction(item:XML):Class
{
var parentName:String;
var parentNode:XML;
parentNode = item.parent();

// Return office icon if node name not equal to item
if( item.name() != "item" )
{
return iconOffice;
}

// Check if parent not null
if (parentNode != null ){
// Get parent name
parentName = parentNode.name();

// Sales below 30000: return error icon
// Expenses below 30000: return clear icon
if( item.@amount < 30000 )
{
return parentName == "Sales" ? iconError : iconClear;
}
// Warning icon: the same threshold for both cases
else if ( item.@amount < 60000 )
{
return iconWarning;
}
// amount is greater than 60000, return clear if sales
// and error if Expenses
else
{
return parentName == "Sales" ? iconClear : iconError;
}
}
// default if none of the above apply
return iconOffice;
}

]]>
</fx:Script>

<s:Button label="Generate New Data" click="init()"/>

<mx:AdvancedDataGrid id="adg" width="100%" height="100%"
dataProvider="{dataHierarchy}" iconFunction="iconFunction">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Finance" width="350"
labelFunction="labelFunction"/>
<mx:AdvancedDataGridColumn headerText="Amount" dataField="@amount" width="150"/>
</mx:columns>
</mx:AdvancedDataGrid>

</s: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!

(8 votes, average: 5.00 out of 5)

Loading ...

d1ccf9347c00d35082100c0954d0c379delicious

Comments

4 Responses to “Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction”

Said on May 19th, 2010 6:30 pm

Hi

This is really a nice example.

All the best
Said
armolina on November 11th, 2010 9:16 am

Good example!!

thanks.
Suka on May 23rd, 2011 10:16 am

Thanx that muuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuch =)
Mahesh on September 27th, 2011 7:37 am

Hi Arjan, nice example, can u tell me how can i handle the hierarchical tree node clicking event so the i can adjust the height of the advanceddatagrid when tree collapses and expands

Thanq in advance

Flex Examples

Flash Builder Examples

AIR Examples

Flex Mobile Examples

WP Flex Contact Form

Flash CountDown Plugin

Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction

Was this post useful to you?

Comments

+1?

Support Flex Blog!

Advertisements

Recent Posts

Categories

Archives

Blogroll

Meta

Popular Posts

Flex Examples

Flash Builder Examples

AIR Examples

Flex Mobile Examples

WP Flex Contact Form

Flash CountDown Plugin

Data Dependant Tree Icon with Tree in AdvancedDataGrid with iconFunction

Was this post useful to you?

Comments

+1?

Support Flex Blog!

Popular Tags

Advertisements

Recent Posts

Categories

Archives

Blogroll

Meta

Popular Posts