Tecsi Aron

Been working in IT since 2000, mostly in VB* till 3 years ago, when i migrated to Flash and AS3. Made several projects that combine AS3 with PHP. Mostly worked on games and Desktop applications.

View all articles by Tecsi Aron
So lets start with the obviousness, create a new AS3 fla, and drag a DataGrid component to the stage. I will name it
dataG.
Put this code on the frame:
import fl.data.DataProvider;
var xml:XML=<tickets>
                <item>
                    <ID>231</ID>
                    <Status>Modified</Status>
                </item>
                <item>
                    <ID>232</ID>
                    <Status>Confirmed</Status>
                </item>
                <item>
                    <ID>233</ID>
                    <Status>Pending</Status>
                </item>
                </tickets>;
dataG.dataProvider= new DataProvider(xml)


If you publish the movie now, it should look something like this:



Now what we will try to do, is change the text formating of the Status column.
As the DataGrid dose not give us any direct access to individual cells (unless you asign them events), I feel the easyest way to achive the goal is to use the CellRenderer.
So we are going to make our own CellRenderer. To do this, open a new AS file, and write this code:

package
{
    import fl.controls.listClasses.CellRenderer;
    import flash.text.TextFormat;
    import fl.controls.listClasses.ListData   
    public class customRender extends CellRenderer
    {
        public function customRender():void
        {
           
        }
        public override function set listData(value:ListData):void//Override the seter function of listData
        {
            var tf:TextFormat = new TextFormat();
            tf.bold = true;
            super.listData = value;//call to the original seter function
            switch (data.Status)//Set the right color for this cell
            {
                case "Pending":
                    tf.color = 0xFF0000;
                break;
                case "Modified":
                    tf.color=0xFF6600;
                break;
                case "Confirmed":
                    tf.color=0x009900;
                break;
            }
            setStyle("textFormat",tf)//Apply text format           
           
        }
    }
   
}


To explain a bit, you are overriding the setter of the listData property ("public override function set listData(value:ListData):void"). You need to override this function as only when listData is specified the DataGridColumn object knows what he needs to display. After this, it is pretty strait forward. All you do is decide what color should be applied to the cell.

So now that you have the custom CellRenderer, all you have to do, is to assign it to the last column. You can do that by adding this to the code in your .fla:
dataG.columns[1].cellRenderer=customRender;

Publishing it should result this:


You can download working code here.

Hope some of you will find it this usefull.