Helpful Information
 
 
Category: Apache Flex
Flex DataGrid and percentage formating

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

This took care of the sorting problem. 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!

You need to use a custom sort function for example sorting dates:

Your column


<mx:DataGridColumn dataField="dateAdded" labelFunction="cellDateFormatter"
headerText="Date of Comment"
sortCompareFunction="date_sortCompareFunc"
showDataTips="true"
dataTipFunction="date_dataTipFunc"
/>

Your function



private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
/* Date.parse() returns an int, but
ObjectUtil.dateCompare() expects two
Date objects, so convert String to
int to Date. */
var dateA:Date = new Date(Date.parse(itemA.dateAdded));
var dateB:Date = new Date(Date.parse(itemB.dateAdded));
return ObjectUtil.dateCompare(dateA, dateB);
}

In your case use regex to split up the percentage numbers










privacy (GDPR)