Add a % sign and color it

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

1. add a '%' sign at the end of each number in the c开发者_开发百科olumn 

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
        }
    }
}
}

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) + "%";
    }
}
}

Try putting this method in your item renderer class. It should fulfill your requirements:

override public function set data(value:Object):void {
    super.data = value;
    if (value) {
        var fieldValue:Number =
            value[DataGridListData(listData).dataField] as Number;
        text = String(fieldValue) + "%";
        if (fieldValue < 0){
            setStyle( "color", 0xA41330 ); //red
        }else{
            setStyle( "color", 0x59A336 ); //green
        }
    }
}

Regards.

Use datagrid column stylefunction and labelfunction. With stylefunction you can toggle color and with labelfunction you can add % character to your data.