How to dynamically change background colour of datagrid row?

Question

Hi,

It seems like there are various hacks out there to change the background colour of the row of a datagrid but all of them seem to happen at render time.

See: http://stackoverflow.com/questions/748213/setting-background-color-for-datagrid-row-in-adobe-flex

I have a datagrid where I need to change row colours to red then back to normal frequently based on changes to the bound ArrayCollection. So I'm looking for a way to change the row colours dynamically.

Can anyone help? Obviously as the changes are happening frequently it would be nice if changing the background colour of the row wasn't an expensive process, but beggar's can't be choosers :-)

Thanks,

Chris

Answer 1

You'll have to write a custom component, I'll include sanitized code from our project. Somewhere in your ActionScript, you'll need to write this for each column:

column.itemRenderer = new ClassFactory(CellRenderer);

Here's the custom class:

public class CellRenderer extends Label {
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { 
        super.updateDisplayList(unscaledWidth, unscaledHeight); 
        var g:Graphics = graphics;
        g.clear();
        for each(var object:Object in arrayCollection) {
            if (object.rowIndex == 0) { //or whatever your conditions are
                g.beginFill(0xFFFFC0); 
                g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                g.endFill(); 
            }
        } 
    } 
} 

Answer 2

houser2112's answer works, but your best bet is to use an itemRenderer (similar to the class that houser wrote), but to change display properties on that class on the setter of data. Let me google that for you.