Formatting My DataGrid Cells For Currency

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:
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.
Now, I don't want to have to write all the logic out to format a number as currency, so I turn to a handy little baked-in class called CurrencyFormatter. This little guy has a method called "format" to do your dirty work and a ton of properties to control just how dirty you want it. (precision, rounding, useNegativeSign, etc...) I created an instance of the CurrencyFormatter class like so:
[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.

Site Updates

Entry Comments

Entries Search