How Can I Conditionally Color DataGrid Row Text Using an ItemRenderer in Flex 3

Question

I've got a question about coloring rows in a Flex 3 DataGrid. I'd like to make everything in the "Basic" and "Below Basic" row red:

<mx:DataGrid id="myGrid" 
   width="450"  
   dataProvider="{initDG}" 
   showHeaders="false">

   <mx:columns>
    <mx:DataGridColumn dataField="Indicator" itemRenderer="com.dcscore.ColorCells2"/>
    <mx:DataGridColumn  id="schoolColumn" dataField="Result"  fontWeight="bold"  itemRenderer="com.dcscore.ColorCells2"/>
    </mx:columns> 
</mx:DataGrid>

My ItemRenderer is:

package com.mySite {

    import mx.controls.Label;
    import mx.controls.dataGridClasses.*;

    public class ColorCells2 extends Label {
         override public function set data(value:Object):void
     {
        if(value != null)
        {
           super.data = value;

                if(value[DataGridListData(listData).dataField] == "Basic:"){
                  setStyle("color", 0xFF0000)}

                if(value[DataGridListData(listData).dataField] == "Below Basic:"){
                  setStyle("color", 0xFF0000)}       



        }
     }
  }

}

I can get "Basic" and "Below Basic" to appear red in the Indicator column. But, how do I get the corresponding values in the Result column to appear red. I don't know how to reference those cells.

In short, I want to make the entire "Below" and "Below Basic" rows appear red. Any suggestions?

Answer 1

If you know that the data item you are comparing against is always "Indicator" then reference that data item explicitly, so regardless of which column you are rendering your conditional logic is always applied to "Indicator", resulting in all columns being colored based on the value of that data item.

override public function set data(value:Object):void
{
  if(value != null)
  {
     super.data = value;

     if(value["Indicator"] == "Basic:")
       setStyle("color", 0xFF0000);

     if(value["Indicator"] == "Below Basic:")
       setStyle("color", 0xFF0000);
  }
}