Datagrid and percentage formatting

Question

I am having some difficulty rendering percentages in the
DataGrid. I have the following JSON file structure:
{"n":"Zimbabwe",
"o":"63%",
"m":"38%",
"g":"1,900"
When I import these values into the DataGrid, there is a
problem when I try to sort the percentage columns. The percentages
are not sorted in the correct order, resulting in something like
this:
0%
100%
14%
17%
etc..
Instead of:
0%
14%
17%
100%
So, I tried changing the JSON file to:
{"n":"Zimbabwe",
"o":"63",
"m":"38",
"g":"1900"
However, now I am having problems getting Flex to display a
percentage symbol next to the numbers in the DataGrid. Any idea
what I need to do to get this working? What is the right approach
to take when working with number formatting in the DataGrid? Should
I be formatting the numbers inside the data source before feeding
into Flex, or should I be storing the raw numbers in the JSON file
and then formatting them with Flex?
Great if someone can point me in the right direction, because
I really can't find any information about it anywhere on the
Internet.
Many thanks!

Answer 1

My advice is not to pass strings where you actually want to
pass a integer/float.
So best is to pass this :
{"n":"Zimbabwe",
"o":"63",
"m":"38",
"g":"1900"
Then use a item renderer to render the values as percentage
values.
Ries
Here is my ProcentualRenfderer.mxml
<mx:VBox xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComp onent">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridItemRenderer
import mx.events.FlexEvent;
private var _listData:DataGridListData;
// Implement the drawFocus() method for the VBox.
override public function drawFocus(draw:Boolean):void {
followUpCB.setFocus();
[Bindable] private var _numDigits:Number = 2;
[Bindable]
override public function set data(value:Object):void{
super.data = value;
followUpCB.text=Math.round(data[_listData.dataField] *
(Math.pow(10,_numDigits)) ) / (Math.pow(10,_numDigits)) + '%';
override public function get data():Object {
return super.data;
public function get listData():BaseListData
return _listData;
public function set listData(value:BaseListData):void
_listData = DataGridListData(value);
public function set numDigits(value:Number):void {
_numDigits = value;
public function get numDigits():Number {
return _numDigits;
]]>
</mx:Script>
<mx:Label id="followUpCB" textAlign="right"
width="100%"/>
</mx:VBox>