Question

I have a datagrid column with numbers in it. How do I:

1. add a '%' sign at the end of each number in the column 

AND

2. make the color either red or green depending on if the number is less than or greater than 0, respectively. 

I’ve been able to do 1 or the other but not both. Here is what I have, which does #2 but not #1:

// my datagrid column:
<mx:AdvancedDataGridColumn dataField="change" itemRenderer="itemrenderers.ColorRenderer" />

// my item renderer:
package itemrenderers 
{
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
public class ColorRenderer extends Label {
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if (data && data[DataGridListData(listData).dataField] < 0)
        {
            setStyle( "color", 0xA41330 ); //red
        }
        else
        {
            setStyle( "color", 0x59A336 ); //green
        }
    }
}
}

Answer 1

If your code is coloring the label correctly, this should work.

// my datagrid column:
<mx:AdvancedDataGridColumn dataField="change" itemRenderer="itemrenderers.ColorRenderer" />

// my item renderer:
package itemrenderers 
{
import mx.controls.Label;
import mx.controls.dataGridClasses.DataGridListData;
public class ColorRenderer extends Label {
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList(unscaledWidth, unscaledHeight);
        if (data && data[DataGridListData(listData).dataField] < 0)
        {
            setStyle( "color", 0xA41330 ); //red
        }
        else
        {
            setStyle( "color", 0x59A336 ); //green
        }
        text = (data[DataGridListData(listData).dataField] as String) + "%";
    }
}
}