Fx{r} is trying to start the Fx{r} Community! Please join our group on Adobe Groups following this link: http://groups.adobe.com/groups/ab29539ab9.
Fx{r} is now on Twitter too. Follow us @ twitter.com/fx_r!
« Load AS3 SWF in AS2 SWF
» Importing Image With Border in a Panel

ActionScript, Components, How to

Different Rows in DataGrid - Programmatically Added itemRenderers (ClassFactory and IFactory)

Andrei Ionescu | 09.01.09 | 2 Comments

DataGrid is a interesting, very useful component. Lots of things can be added to it. This time we will want to emphasize some row that will satisfy a predefined condition - in a DataGrid.

The application is very simple. Just to show you how you can achieve it. In order to do that we will have to user item renderers. The renderer set the items in three possible styles: in red will be the rows with status zero, in green the rows with status 4, and the rest with gray.

In this example we will see how to use item renderers in two ways: using ClassFactory and implementing IFactory.

Both versions of renderers are similar. The data setter is the same in both.

The differences are this…

Using ClassFactory

DataGridItemRendererExample.mxml

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
// datagrid that will use ClassFactory
_dataGrid = new DataGrid();
_dataGrid.percentWidth = 100;
_dataGrid.percentHeight = 100;
// columns array
var columnsArray:Array = [];
 
var dataGridColId:DataGridColumn = 
	new DataGridColumn("Id");
dataGridColId.dataField = "@id";
// setting item renderer - using ClassFactory
dataGridColId.itemRenderer = 
	new ClassFactory(CustomDataGridItemRenderer);
columnsArray.push(dataGridColId);
 
var dataGridColGender:DataGridColumn = 
	new DataGridColumn("Gender");
dataGridColGender.dataField = "@gender";
// setting item renderer - using ClassFactory
dataGridColGender.itemRenderer = 
	new ClassFactory(CustomDataGridItemRenderer);
columnsArray.push(dataGridColGender);
 
var dataGridColAge:DataGridColumn = new DataGridColumn("Age");
dataGridColAge.dataField = "@age";
// setting item renderer - using ClassFactory
dataGridColAge.itemRenderer = 
	new ClassFactory(CustomDataGridItemRenderer);
columnsArray.push(dataGridColAge);
 
var dataGridColNick:DataGridColumn = new DataGridColumn("Nickname");
dataGridColNick.dataField = "@nickname";
// setting item renderer - using ClassFactory
dataGridColNick.itemRenderer = 
	new ClassFactory(CustomDataGridItemRenderer);
columnsArray.push(dataGridColNick);
 
var dataGridColStatus:DataGridColumn = new DataGridColumn("Status");
dataGridColStatus.dataField = "@status";
// setting item renderer - using ClassFactory
dataGridColStatus.itemRenderer = 
	new ClassFactory(CustomDataGridItemRenderer);
columnsArray.push(dataGridColStatus);
 
// adding columns
_dataGrid.columns = columnsArray;
// set data provider
_dataGrid.dataProvider = (new XML(indata.text))..row;
// add DataGrid to UI
hCnv.addChild(_dataGrid);

CustomDataGridItemRenderer.as

35
36
37
38
public class CustomDataGridItemRenderer extends Label
.
.
.

Implementing IFactory

DataGridItemRendererExample.mxml

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
// datagrid that will implement IFactory
_dataGridIF = new DataGrid();
_dataGridIF.percentWidth = 100;
_dataGridIF.percentHeight = 100;
// columns array
var columnsArray2:Array = [];
 
var dgColNick:DataGridColumn = new DataGridColumn("Nickname");
dgColNick.dataField = "@nickname";
// setting item renderer - NOT using ClassFactory
// CustomDataGridItemRendererWithIFactory implements IFactory
dgColNick.itemRenderer = new CustomDataGridItemRendererWithIFactory;
columnsArray2.push(dgColNick);
 
var dgColStat:DataGridColumn = new DataGridColumn("Status");
dgColStat.dataField = "@status";
// setting item renderer - NOT using ClassFactory
// CustomDataGridItemRendererWithIFactory implements IFactory
dgColStat.itemRenderer = new CustomDataGridItemRendererWithIFactory;
columnsArray2.push(dgColStat);
 
// adding columns
_dataGridIF.columns = columnsArray2;
// set data provider
_dataGridIF.dataProvider = (new XML(indata.text))..row;
// add DataGrid to UI
hCnv2.addChild(_dataGridIF);

CustomDataGridItemRendererWithIFactory.as

34
35
36
37
38
39
40
41
42
43
44
45
import mx.core.IFactory;
 
public class CustomDataGridItemRendererWithIFactory extends Label implements IFactory
{
    // this method is needed by IFactory
    public function newInstance():*
    {
        return new CustomDataGridItemRendererWithIFactory();
    }
.
.
.

Code is commented and can be downloaded bellow.

Share and Enjoy:
  • TwitThis
  • Technorati
  • StumbleUpon
  • del.icio.us
  • NewsVine
  • Reddit
  • Digg
  • Furl
  • co.mments
  • blogmarks
  • Slashdot
  • description
  • Taggly
  • YahooMyWeb
  • connotea
  • Webride
DataGridItemRendererExample
DataGridItemRendererExample_sources




Tags: , , ,

This post was written by Andrei Ionescu

Views: 4532

related

2 Comments

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

:

:


« Load AS3 SWF in AS2 SWF
» Importing Image With Border in a Panel