Style AdvancedDataGrid depending on data example

15 December 2009

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.

Besides displaying Trees, SummaryRows and stuff like that, the AdvancedDataGrid has another nice feature the standard DataGrid doesn’t have: a styleFunction! Using that we can style the label as we like for each column in each row. Take a look at the following example to find out how its done.

Ok first of all I need some dummy data in an ArrayCollection to work with. I created a collection with objects that have a name and a inStock attribute, furthermore I added an identifier to indicate if the object is the summary or not by introducing an attribute called isSummaryRow. I’m gonna use all those attributes later when i’m going to style my rows & columns.

Create dummy data (call function on initialize event of the application):

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

import mx.collections.ArrayCollection;

[Bindable]
private var dataProvider:ArrayCollection;

private function init():void
{
var obj:Object;
dataProvider = new ArrayCollection();
obj = new Object();
obj.name = "Product One";
obj.inStock = 3;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Two";
obj.inStock = 13;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Three";
obj.inStock = 7;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Four";
obj.inStock = 0;
obj.isSummaryRow = false;
dataProvider.addItem(obj);

var inStockSum:int = 0;
for each( obj in dataProvider )
{
inStockSum += obj.inStock;
}
obj = new Object();
obj.name = "Total in stock:"
obj.inStock = inStockSum;
obj.isSummaryRow = true;
dataProvider.addItem(obj);

}

Now create an AdvancedDataGrid that shows this data:

1
2
3
4
5
6

<mx:AdvancedDataGrid width="400" height="300" dataProvider="{dataProvider}" styleFunction="styleFunction">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Product"/>
<mx:AdvancedDataGridColumn dataField="inStock" headerText="In Stock"/>
</mx:columns>
</mx:AdvancedDataGrid>

Notice the styleFunction attribute, we’re going to implement that function next, I want to display the count of the items that are in stock in green and the count of the items that are not in stock in red. Furthermore, I want the total number of items in stock (summaryRow) to have font weight bold, here’s the function to achieve this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

private function styleFunction(data:Object, col:AdvancedDataGridColumn):Object
{
if( col.dataField == "inStock" )
{
if( data.inStock == 0 )
{
return {color:0xFF0000};
}
else if( data.inStock > 0 && data.isSummaryRow == false )
{
return {color:0x00FF00 };
}
else if( data.isSummaryRow == true ){
return {fontWeight:"bold"};
}
else{
return null;
}
}
return null;
}

Notice that the function takes two parameters: the data of the row and the column. By combining these you can style each cell individually!

Check out the sample, view source is enabled.

Here is the complete source:

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

<?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()"
xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768" viewSourceURL="srcview/index.html">

<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.advancedDataGridClasses.AdvancedDataGridColumn;
[Bindable]
private var dataProvider:ArrayCollection;

private function init():void
{
var obj:Object;
dataProvider = new ArrayCollection();
obj = new Object();
obj.name = "Product One";
obj.inStock = 3;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Two";
obj.inStock = 13;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Three";
obj.inStock = 7;
obj.isSummaryRow = false;
dataProvider.addItem(obj);
obj = new Object();
obj.name = "Product Four";
obj.inStock = 0;
obj.isSummaryRow = false;
dataProvider.addItem(obj);

var inStockSum:int = 0;
for each( obj in dataProvider )
{
inStockSum += obj.inStock;
}
obj = new Object();
obj.name = "Total in stock:"
obj.inStock = inStockSum;
obj.isSummaryRow = true;
dataProvider.addItem(obj);

}

private function styleFunction(data:Object, col:AdvancedDataGridColumn):Object
{
if( col.dataField == "inStock" )
{
if( data.inStock == 0 )
{
return {color:0xFF0000};
}
else if( data.inStock > 0 && data.isSummaryRow == false )
{
return {color:0x00FF00 };
}
else if( data.isSummaryRow == true ){
return {fontWeight:"bold"};
}
else{
return null;
}
}
return null;

}

]]>
</fx:Script>

<fx:Declarations>

</fx:Declarations>

<s:VGroup paddingLeft="10" paddingTop="10">

<mx:AdvancedDataGrid width="400" height="300"
dataProvider="{dataProvider}" styleFunction="styleFunction">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="name" headerText="Product"/>
<mx:AdvancedDataGridColumn dataField="inStock" headerText="In Stock"/>
</mx:columns>
</mx:AdvancedDataGrid>

</s:VGroup>

</s:Application>

Written by Arjan · Filed Under Examples

Was this post useful to you?

(2 votes, average: 5.00 out of 5)

Loading ...

Comments

2 Responses to “Style AdvancedDataGrid depending on data example”

Roberto Kalili on December 25th, 2009 8:47 pm

Hi, I have an AdvancedDatagrid souced with an ArrayCollection. I have 2 groups (state and name). I have some filters in the screen, like date, area, etc. Everything is working fine. But I have a slider with a range of hours. The groupcollection have a summary row totalizing hours per row (per name).
I`d like to filter this summaryrows. I wanto only the totals having values between the slider range are showing.

Sorry about my english.

Can you help me?

Thank you very much

Roberto
Arjan Nieuwenhuizen on December 28th, 2009 10:55 am

Hard to answer your question without more info or your source code. How are you filtering your data? On the ArrayCollection itself?

I think you can achieve your goal by filtering the dataProvider of the AdvancedDataGrid (myADG.dataProvider or something like that). You should have access to the SummaryRow values then, ofcourse if you can access them, you can filter them.

Hope it helps.

Arjan

Flex Examples

Flash Builder Examples

AIR Examples

WP Flex Contact Form

Flash CountDown Plugin

Style AdvancedDataGrid depending on data example

Was this post useful to you?

Comments

Sponsors

Flex Blog Readers

Testing..

Flex Jobs (from Flex Jobs.org)

Advertisement

Recent Posts

Categories

Archives

Blogroll

Meta

Popular Posts

Flex Examples

Flash Builder Examples

AIR Examples

WP Flex Contact Form

Flash CountDown Plugin

Style AdvancedDataGrid depending on data example

Was this post useful to you?

Comments

Sponsors

Popular Tags

Flex Blog Readers

Testing..

Flex Jobs (from Flex Jobs.org)

Advertisement

Recent Posts

Categories

Archives

Blogroll

Meta

Popular Posts