Datagrid and percentage formatting

[Former Community Member]

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!

[atta707]

have a look at the sortCompareFunction property of
DataGridColumn. This function allows you to define you custom
sorting implementation is meant exactly for these kind of
scenarios. Flex Builder help and web has examples of this.



ATTA

[Former Community Member]

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.IFocusManagerComponent">

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