Last week I showed how to use the new Flex 3 AdvancedDataGrid to group data (that example used ColdFusion data returned as a query, although the example could also be applied to other back-ends, too). Grouping creates a tree within the data grid, so that groups of data may be collapsed and expanded as needed.
Now let’s take the example a step further, this time adding summary data. For example, suppose you were displaying sales orders, grouped by customer and then by order number. When collapsed the tree would list all customers, but no details. When a customer was expanded the tree would list all orders for that customer, but no details. When a specific order was expanded, then the details for that order would be displayed. That’s how basic grouping works.
But what if you wanted to show summary data for groups? For example, customer rows could show total of all orders for that customer, regardless of how many orders there were, and whether or not the customer group is expanded or collapsed. And then order rows could show order totals. You get the idea. And yes, this functionality is built in to the Flex 3 AdvancedDataGrid.
As before, this is a ColdFusion powered example using the default database tables that come with ColdFusion 8. Here is the simple CFC method which just returns several columns from three tables:
SELECT orders.orderid,
artname, orderitems.price,
customerlastname || ', ' || customerfirstname AS customer
FROM orders, orderitems, art
WHERE orders.orderid=orderitems.orderid
AND orderitems.artid=art.artid
ORDER BY customer, orders.orderid
I saved this component as art.cfc in a folder named test beneath the web root. You can save it wherever you like, but of course you’ll need to adjust the path in the MXML accordingly. (If you tried the previous example, you could just add this getOrders() method to the existing CFC.
Now for the MXML:
I am not going to explain the basics of invoking the CFC method via
First of all, to make it easier to expand and collapse the tree within the
As before,
And as before,
As you can see, adding summary data to an
One last note, the example data used here is not ideal, as each customer has a single order, and only one order (for customer “White, Sue”) has more than one item. You may want to add some data to the example tables to better demonstrate how summary data works. Or just use your own data.
Ben,
Great help. Thank you!
Ben,
In this example, is there a way to have different operations at different levels. Say, for example, we find the total price per order and then, what was the max. order that each customer ever had. I tired doing that but the operation works on the root fields only and not on the summarized data. Could you help?
Thanks in advance,
GG
You can definitely do that using a custom summary function.
— Ben
I am trying to build advanced grid dynamically based on results of a query. It has to be dynamic, because the #of columns would change and the headers would change based on selection of a combo box on the page. I would like to build dynamic column grouping. I need help on how I can achieve this dynamically. In what format should the structure be and how do I assign the group headers dynamicaly. I can send you the code.
Thanks a lot. Your website is heaven sent!
Ben, I am finally figuring stuff out. I have a summary column, that sum’s things up but the format is not what I want I have tried a few things itemRenderer, rendererProviders etc. My other columns that use the itemRenderer work great and display 2 decimal places. Is there a trick?
George
Thanks for your post.
I ned some help with ADG. I need, using filterFunction, I think, filter ADG data when the summary value is between 2 values selected into slider component, e.g, if total of values is between 10 and 20 (values setted in slider component dinamically).
Could you help me please? (sorry about my english)
thank you again
Roberto