Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Datagrid and percentage formatting

Avatar

Avatar
Level 1
Stinky_Tofu
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
View profile

Avatar
Level 1
Stinky_Tofu
Level 1

Likes

0 likes

Total Posts

2 posts

Correct Reply

0 solutions
View profile
Stinky_Tofu
Level 1

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

Avatar

Avatar
Affirm 1
Level 2
atta707
Level 2

Likes

0 likes

Total Posts

30 posts

Correct Reply

2 solutions
Top badges earned
Affirm 1
View profile

Avatar
Affirm 1
Level 2
atta707
Level 2

Likes

0 likes

Total Posts

30 posts

Correct Reply

2 solutions
Top badges earned
Affirm 1
View profile
atta707
Level 2

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

Avatar

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>