Highlighted

Datagrid and percentage formatting

Stinky_Tofu

03-09-2008

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!



Replies

Highlighted

atta707

03-09-2008

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
Highlighted

riesvantwisk

11-09-2008

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>