CustomRowColorDataGrid component
However the flex DataGrid doesn't allow you to set the row color this way. Turns out in order to do this you need to extend the DataGrid and override the drawRowBackground() method and put your own logic in it. Not fun at all.
So to make it easier for myself, and you, I've abstracted this out in a way that make the new DataGrid re-usable, and I've added it to my growing collection of components that you can download from here.
So the syntax to use this new grid is to write a new function, just like the ArrayCollections filterFunction. And the new DataGrid will call this function for every row it renders in the DataGrid, to get the right background row color.
The function signature needs to be this:
f(item:Object, defaultColor:uint):uint
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:nimer="com.mikenimer.components.datagrid.*">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
private function selectTypeColor(item:Object, color:uint):uint
{
if( item['type'] == "Warning" )
{
return 0xFFFF00;
}
else if( item['type'] == "Error" )
{
return 0xFF0033;
}
return color;
}
]]>
</mx:Script>
<nimer:CustomRowColorDataGrid
id="sampleGrid"
rowColorFunction="selectTypeColor"
width="100%" height="100%">
<nimer:dataProvider>
<mx:Array>
<mx:Object type="Information" message="something good worked"/>
<mx:Object type="Information" message="something else worked"/>
<mx:Object type="Information" message="I like flex"/>
<mx:Object type="Error" message="Opps, something didn't work."/>
<mx:Object type="Warning" message="flex has a learning curve"/>
<mx:Object type="Information" message="flex is fun"/>
</mx:Array>
</nimer:dataProvider>
</nimer:CustomRowColorDataGrid>
</mx:Application>
