Custom DataGrid with multiple row colors

CustomDatagrid.as

package com
{
import mx.controls.DataGrid;
import flash.display.Sprite;
import mx.collections.ArrayCollection;

public class Customgrid extends DataGrid
{
public var rowColorFunction:Function;

public function Customgrid()
{
super();
}
override protected function drawRowBackground(s:Sprite,  rowIndex:int,
y:Number, height:Number, color:uint, dataIndex:int):void
{
if(rowColorFunction != null && dataProvider != null)
{
var item:Object;
if(dataIndex < dataProvider.length)
{
item = dataProvider[dataIndex];
}
if(item)
{
color = rowColorFunction(item, rowIndex, dataIndex, color);
}
}

super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}
override protected function drawHorizontalLine(s:Sprite, rowIndex:int, color:uint, y:Number):void
{
super.drawHorizontalLine(s,rowIndex,0x0000ff,y);
}
}
}

In this above custom grid i have over ridden a function called drawRowBackground in which iam setting the colors to the rows of the grid through a function rowColorFunction .

Application

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” xmlns:co=”com.*” creationComplete=”init()”>
<mx:Style source=”ext.css”>

</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;

private var arrCol:ArrayCollection=new ArrayCollection();
private var color1:uint=new uint();
private var back2:uint=new uint();
private var back3:uint=new uint();

private function init():void
{
for(var i:int=0;i<20;i++)
arrCol.addItem({idl:1,label:"data1"});
adg1.dataProvider=arrCol;
color1=adg1.getStyle("back1");
back2=adg1.getStyle("back2");
}
private function myfun(item:Object, rowIndex:int, dataIndex:int, color:uint):uint
{
if(rowIndex % 2)
return color1;
else if(rowIndex==4)
return back2;
else
return back3;
}

]]>
</mx:Script>
<co:Customgrid x=”156″ y=”86″ id=”adg1″ rowColorFunction=”myfun” styleName=”ColorGrid”>
<co:columns>
<mx:DataGridColumn headerText=”Column 1″ dataField=”idl”/>
<mx:DataGridColumn headerText=”Column 2″ dataField=”label”/>
</co:columns>
</co:Customgrid>

</mx:Application>

In this application i have just set the  row color for the grid through the rowcolorfunction

Note:I am setting the color from a style sheet so that u can dynamically change the colors u want.

.ColorGrid
{
back1 :#740F0F;
back2 :#ffffff;
back3 :#111111;
}

Download /View : http://www.box.net/shared/xua0f38u4n