Style AdvancedDataGrid depending on data example

15 December 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.

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?

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

(3 votes, average: 5.00 out of 5)

Loading ...

cf206ed53bef3083ca7b5634ae1f1abadelicious

Comments

3 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
Henry Rabinowitz on August 5th, 2011 12:05 am

Do you know which style attributes, besides color and fontWeight are available for setting in styleFunction?
Or to put the question another way, what is the object for which we are setting the styles?

Flex Examples

Flash Builder Examples

AIR Examples

Flex Mobile Examples

WP Flex Contact Form

Flash CountDown Plugin

Style AdvancedDataGrid depending on data example

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

Style AdvancedDataGrid depending on data example

Was this post useful to you?

Comments

+1?

Support Flex Blog!

Popular Tags

Advertisements

Recent Posts

Categories

Archives

Blogroll

Meta

Popular Posts