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.
| ||
|
Tags: ActionScript, datagrid, itemrenderer, renderer
This post was written by Andrei Ionescu
Views: 4532
























Thanks, good article~
Hey nice article….keep it up..
Thanks..