Change the background color of a FLEX DataGrid row,How to change datagrid's row background color

Some times you want to change the background color of a row inside a FLEX DataGrid. You usually want to do so in order to mark that row as an error or to make it out stand from the other rows.
For unknown reason this is not a simple task as it sounds.

See complete source in the attachments section

See working example HERE

In AS 2.0 it was possible to use :

DataGrid.setPropertiesAt(, {backgroundColor:0xFF0000});

But this code does not work any more in AS 3

My example here is mostly based on some code that i saw here:
http://weblogs.macromedia.com/pent/archives/2006/10/datagrid_tip_ro.html

The idea is to create our own DataGrid class that inherits the function "drawRowBackground" and changes the background color for each line/row

So i created 2 examples that use 2 different variants of this solution:

Solution number 1 assumes that each dataGrid item has a property called "color"

This is the code for that solution:

package com.softologia
{
import flash.display.Sprite;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class DataGridEx2 extends DataGrid
{
public function DataGridEx2()
{
super();
}

override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number,
color:uint, dataIndex:int):void
{
var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
if( item.hasOwnProperty("color")){
color = item.color;
}

super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
}

In the above code we can see that the function "drawRowBackground" is overridden and for each item we check if it has a property called "color" , if it does we use that color for that row

Solution number 2:
In this solution we also create a class that inherits from DataGrid, but here we do not assume that each data item has a property called color.
Instead we create a CallBack function that will be used for each item to determine that row color

see code below:


package com.softologia
{
import flash.display.Sprite;

import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class DataGridEx1 extends DataGrid
{
public var rowBackgroundColorFunction:Function;
public function DataGridEx1()
{
super();
}
override protected function drawRowBackground(s:Sprite, rowIndex:int,
y:Number, height:Number,
color:uint, dataIndex:int):void
{
if( rowBackgroundColorFunction!=null ){
var item:Object = (dataProvider as ArrayCollection).getItemAt(dataIndex);
color = rowBackgroundColorFunction(item);
}
super.drawRowBackground(s,rowIndex,y,height,color,dataIndex);
}
}
}

In the code above we have a member called "rowBackgroundColorFunction", when we use this DataGridEx1 from the MXML file we can define a function that will be called for each line

Example function:

private function getRowBackgroundColor(item:Object):uint{
if( item.color!=null ){
return item.color;
}
return 0xFFCCFF;

}

Below we can see usage example of these 2 solutions:

<?xml version="1.0" encoding="utf-8"?>

See complete source in the attachments section