Setting background color for datagrid row in Adobe Flex

Question

Hi Folks,

I need to programmatically change the background color for a single row in a datagrid in Flex. I've scoured the Net and found reference to "dg.setPropertiesAt," which is not a supported method (according to the compiler). Also, there are suggestions to extend the dg's "drawRowBackground" method but I need to set the background externally (not from logic inside the dg).

Any and all suggestions welcome.

TIA, Bob

Answer 1

You'll have to use an itemRenderer in order to accomplish this. See the following examples for more information:

http://butterfliesandbugs.wordpress.com/2007/07/11/using-an-itemrenderer-to-change-the-background-of-a-datagrid-cell/

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=61&productId=2

Answer 2

I was wondering the same thing just a couple of days ago. If you have the Pro version of Flex, its AdvancedDataGrid has the built-in "styleFunction" property to handle this. If you've only got the regular DataGrid handy, this might help:

http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2&postId=12548

A comment there links to documentation of styleFunction:

http://livedocs.adobe.com/flex/3/langref/mx/controls/advancedDataGridClasses/AdvancedDataGridBase.html#styleFunction

Beyond that, Stiggler's suggestion for using an itemRenderer is your other recourse.

Answer 3

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

Where dg is your datagrid and the number 3 is the row color of your grid.

Answer 4

I managed it by extending the DataGrid class and creating my own mehtod, like this:

public function paintRow(rowNumber:Number,color:uint):void{
var rowBGs:Sprite=Sprite(listContent.getChildByName("rowBGs"));
drawRowBackground(rowBGs,rowNumber,listContent.rowInfo[rowNumber].y,listContent.rowInfo[rowNumber].height,color,null);
}

This was inspired by the drawRowBackgrounds method of the datagrid class.

Hope it helps.