CustomRowColorDataGrid component
In the last 2 projects I've worked on I've needed to change the background row color of items in the datagrid, based on values in the dataProvider.
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
<?xml version="1.0" encoding="utf-8"?>
<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>

Thanks for providing the source. It helped me to modify DG further.
is it possible to change background color of an individual cell, not the whole row?
Thanks,
Alex.
saved me time!
I'm going to update the blog and my util function with your function, since it is more accurate.
I have used this in one of the applications that I created.
But I want to implment the functionality that if I doubleclick on any of the data Grid columns then the background color of all columns should again set back
to white.
I have been trying to do this but have been unsuccessful so far.
Help Please.
Thanks,
Ruby
I have used this feature in one of the applications that I have created.
But I was trying to extend this so that when i double click on any row then the background color should be again set to white.
However, I have been unsuccessful in doing so.
Helpp Please.
Thanks,
Ruby
Could you please let me know how can I change background color of row in an AdvancedGrid which has HierarchicalData as its dataprovider.
An example would be great.
change for DG. Great Work.
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
if (_rowColorFunction != null)
{
var dp:ListCollectionView;
if (dataProvider is ArrayCollection || dataProvider is Array)
{
if (dataProvider is ArrayCollection)
dp = dataProvider as ListCollectionView;
else if (dataProvider is Array)
dp = new ArrayCollection(dataProvider as Array);
}
else if (dataProvider is XMLListCollection || dataProvider is XMLList || dataProvider is XML)
{
if (dataProvider is XMLListCollection)
dp = dataProvider as ListCollectionView;
else if (dataProvider is XMLList)
dp = new XMLListCollection(dataProvider as XMLList);
else if (dataProvider is XML)
dp = new XMLListCollection(new XMLList(dataProvider as XML));
}
if (dataIndex < dp.length)
{
var item:Object = dp.getItemAt(dataIndex);
color = this.rowColorFunction(item, color);
}
dp = null;
}
super.drawRowBackground(s, rowIndex, y, height, color, dataIndex);
}