PhpRiot
News Archive
PhpRiot Newsletter
Your Email Address:

More information

aY Formatting Flex Datagrid rows

Note: This article was originally published at Planet PHP on 28 June 2010.
Planet PHP

I keep coming across people who seem to think that Flex's data formatting facilities are somewhere between Voodoo and rocket surgery, particularly when it comes to data visualization elements like DataGrids.

Nothing could be further from the truth-Flex may not be the best system in the world, but it's all about manipulating data; therefore, it has some excellent (and super-easy) formatters.

Inside a DataGrid, what seems to be a problem for so many is the fact that the data is seemingly rendered without any input from the developer. All this means, however, is that you need to write your very own, custom item renderer.

Sounds scary? It couldn't be simpler: all you have to do is create a mini-component inside your DataGrid's rows. For example, consider a simple DataGrid whose data provider contains the two columns orderDate (a date) and and orderAmount (a currency value). Normally, your code would probably look like this:

Obviously, there is nothing wrong with this code, which will work just finea except that the output is not quite as user-friendly as it could be:

I don't know about you, but my clients don't normally work in GMT-and those crazy devils just insist that their amounts must be properly formatted with currency signs and thousand separators.

Luckily, this can be rather easily achieved using two of Flex's many built-in data formatters-namely, mx.DateFormatter and mx.CurrentyFormatter. DateFormatter takes a string specification like aoYYYY-MM-DDa and uses it to format a date. CurrencyFormatter, on the other hand, provides a number of parameters, like precision and thousand separators, that can be used to control the textual representation of a currency value. For example, we could write our two formatters like this:

Remember that both formatters are non-visual elements and, therefore, must be added to the element of your component.

All that remains to be done now is to create item renderers to provide a custom representation of each of the DataGrid's columns:

As you can see, we simply use to declare an inline component inside the itemRenderer attribute of each column. Once instantiated, the custom component will have its own scope, but we can still access the data row whose values we must visualize through the data property, while the main component (where our formatters reside) is stored in the outerDocument property. Note that I am using and not , because the DataGrid is a Halo container and, therefore, most Spark components cannot be fit into it1.AFor good measure, I also-right aligned the currency column; note that I am setting the label's width to 100 percent so that it will stretch all the way to the end of the column; oth

Truncated by Planet PHP, read more at the original (another 2363 bytes)