Formatting My DataGrid Cells For Currency
Posted by
Brad Wood
Oct 07, 2008 11:51:00 UTC
If you have been programming in Flex for a while, I have nothing earth-shattering to say here. Nevertheless, having just figured it out I wish to write it down as much for my sake as anyone else. My latest task, simple as it was, involved formatting the numbers in several of my Data Grids as dollars and cents.I didn't want to do any formatting to the data in SQL or the ColdFusion web service that served it. I just wanted to pass the data along in its cleanest form and let the display side of things handle how to output it.
At first, I was a little confused as to the difference between the labelFunction and itemRenderer properties of the DataGridColumn class. They both seemed to give me the ability to control the display of my data in the DataGrid cells. This Post from Kyle Hayes helped clear the air for me. To quote the meat of Kyle's post:
currencyLabelWithCents(item:Object, column:DataGridColumn):String
Use labelFunction when you want to simply format the text (i.e. a phone number, product ID). Use an itemRenderer when you actually want to use an object of some sort in place of the label and text that is used by default (i.e. a checkbox, or button, or a custom component that you created).Well, I simply want to change the way that the text is displayed (dollar signs, commas...) so creating a label function was the solution. I'm a little unclear on why it's referred to as a "label" since that is what I probably would have used to refer to the column headers. Regardless, the label function can be set for each column in your grid like so:
[code]<mx:DataGridColumn dataField="price" headerText="Price" labelFunction="currencyLabelWithCents" />[/code]The label function is called once for each cell in the data grid. In other words, if two of my columns specify this label function, and I have 20 records, my function will be called 40 times. My label function needs to look like this:
currencyLabelWithCents(item:Object, column:DataGridColumn):String
- "currencyLabelWithCents" is an arbitrary name I chose. It's a little long, but descriptive.
- "item" is the set of data used to populate that row. It might be pulled from an XML node, or an ArrayList-- whatever. because you get all the columns' data that allows you to combine one or more columns together in a single cell. For instance, concatenating first and last name.
- "column" is the DataGridColumn object for the column in question. It has all the properties in it that you have set for your column including the dataField value.
- ":String" this means our function returns a string.
[code]<mx:CurrencyFormatter id="currencyFormatterWithCents" precision="2" />[/code]Finally, my label function looked like this:
[code]private function currencyLabelWithCents(item:Object, column:DataGridColumn):String { return currencyFormatterWithCents.format(item[column.dataField]); }[/code]Well, there you have it. I'm very certain there are other ways to skin this cat. Please feel free to share any you think are easier/faster/cooler.
Dutch Rapley
It's not a bad idea to get in the habit of specifying rounding="nearest" when using a CurrencyFormatter. While this doesn't have an impact on currency values in your DataGrid, it's important for displaying the result when performing addition an subtraction on currency, since the Number data type in Flex is floating point. If you don't specify it, and the result is something like, 68.74999999998, the result will be 68.74 (based on the specified precision), not 68.75.
Brad Wood
@Dutch: Interesting... so by default, it is truncating. Thanks for the tip.
wiredcat
This worked very well for me, thanks for educating me on labelFunctions!
john
Great tip! Thank you. jh
Anand Rao
Thanks for the Tip
James
Very nice. Saved me a couple of hours of coding; if I'd done that code and then seen this, I'd have kicked myself. Very slick.