DataGrid - handy hints

Okay the orders list. It’s a plain vanilla DataGrid component bound to the result from an HTTPService call to get an XML representation of an ActiveRecord orders collection. This all pretty easy to get up and running, but I ran into two immediate snags.

Requirement #1 - Multicurrency in the totals column. Our system deals with orders in currencies all over the world, so we have price types and associate each order with a price type. Fair enough. Now we don’t store price type symbol with the total (naturally) so how do we get it to appear in the same column in the the datagrid.

Option 1 (on the Rails side) would be to add some faux accessor and iterate over the orders populating it before we handed it to the to_xml function sending it to Rails (that’s not without it’s problems). OR

Option 2 (on the Flex side) we manipulate it over here. First off we create a little function that takes our current item (row) and the column we’re manipulating, then prepends the symbol and appends the code to the amount.

private function formatCurrency(item:Object, column:DataGridColumn):String
{
   var field:String = column.dataField;
   return item.price_type_dollar_sign+' '+item[field]+’ ‘+item.price_type_symbol;
}

Then in the mxml code for the datagrid

  <mx:DataGridColumn headerText="Total Amount" dataField="total_amount_payable" labelFunction="formatCurrency"/>

Requirement #2 Sorting a field in an order different to that displayed So we have an order status (Draft, Pending Review, Review, Payment Pending, In Manufacturing, Shipped etc). Great, now you put that straight into your datagrid, hit a column header to sort, and realise it’s doing an alpha sort on the status name. As you expect (but not as you wanted). Well again there’s two ways to accomplish this - one is to pass in custom sort function to figure out the order. OR

The other option, is to pipe down in your xml along with the order status name, a sort order numeric value , so Draft is 1 Shipped is 1000, everything in between gets a number etc. Then just as you do for the currency symbol, change the formatting of the column - so we bind our column to the order status sort_order value, but we display the order status name. When the datagrid sorts, it sorts on the bound value, not on the formatted value. Very nifty and simple. Just like this…

private function formatStatus(item:Object, column:DataGridColumn):String
{
    return item.order_status_name;
}
  <mx:DataGridColumn headerText="Status" dataField="order_status_id" labelFunction="formatStatus"/>

No nasty sort function, and does the trick.

That’s it for now… till next time.

No Comments, Comment or Ping

Reply to “DataGrid - handy hints”

About

Rowan is a Director of Technology for a large marketing services company, specialising in architecting, developing and putting web applications into production - in particular Ruby on Rails based apps. He lives in Toronto, Canada but speaks in a funny accent as he's originally from New Zealand. He's been working in the software and web business for over a decade. This blog covers Web Application development and deployment in the real world, dealing with topics from business fundamentals to Ruby on Rails, Merb, PHP, Flex, MySQL, Apache and more.

Read more ...

 

 

View Rowan Hick's profile on LinkedIn

 

Subscribe to my RSS feed