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:
<cfcomponent>
<cffunction name="getOrders" access="remote" returntype="query">
<cfset var result="">
<cfquery datasource="cfartgallery" name="result">
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
</cfquery>
<cfreturn result>
</cffunction>
</cfcomponent>
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:
<?xml version=
"1.0" encoding=
"utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="100%" height="100%"
creationComplete="initApp()"> <mx:Script> <![CDATA[
// Init public function initApp():void
{
// Get data svc.getOrders();
}
]]>
</mx:Script> <!-- Define CFC --> <mx:RemoteObject id="svc"
destination="ColdFusion"
source="test.Art"
result="gc.refresh()" /> <!-- Button bar --> <mx:ApplicationControlBar width="100%"> <!-- Expand all rows in data grid --> <mx:Button label="Expand All"
click="adg.expandAll()" /> <!-- Collapse all rows in data grid --> <mx:Button label="Collapse All"
click="adg.collapseAll()" /> </mx:ApplicationControlBar> <!-- The grid --> <mx:AdvancedDataGrid id="adg"
width="100%" height="100%"> <!-- Define grouping in dataProvider --> <mx:dataProvider> <!-- Convert flat data to group --> <mx:GroupingCollection id="gc"
source="{svc.getOrders.lastResult}"> <mx:Grouping> <!-- First group by customer --> <mx:GroupingField name="CUSTOMER"> <!-- Calculate total per customer --> <mx:SummaryRow summaryPlacement="group"> <mx:fields> <mx:SummaryField dataField="PRICE"
operation="SUM"
label="Total"/> </mx:fields> </mx:SummaryRow> </mx:GroupingField> <!-- Then group by orderid --> <mx:GroupingField name="ORDERID"> <!-- Calculate total per orderid --> <mx:SummaryRow summaryPlacement="group"> <mx:fields> <mx:SummaryField dataField="PRICE"
operation="SUM"
label="Total"/> </mx:fields> </mx:SummaryRow> </mx:GroupingField> </mx:Grouping> </mx:GroupingCollection> </mx:dataProvider> <!-- The grid columns--> <mx:columns> <!-- Empty colume for tree --> <mx:AdvancedDataGridColumn /> <!-- Query columns --> <mx:AdvancedDataGridColumn dataField="CUSTOMER"
headerText="Customer" /> <mx:AdvancedDataGridColumn dataField="ORDERID"
headerText="Order"/> <mx:AdvancedDataGridColumn dataField="ARTNAME"
headerText="Item" /> <mx:AdvancedDataGridColumn dataField="PRICE"
headerText="Price" textAlign="right" /> <!-- Column for calculated totals --> <mx:AdvancedDataGridColumn dataField="Total"
headerText="Total" textAlign="right" /> </mx:columns> </mx:AdvancedDataGrid> </mx:Application>
I am not going to explain the basics of invoking the CFC method via <mx:RemoteObject>, populating the GroupingCollection, and refreshing the <mx:AdvancedDataGrid>. That was covered in the previous post. Rather, let's look at what has changed.
First of all, to make it easier to expand and collapse the tree within the <mx:AdvancedDataGrid>, I added a <mx:ApplicationControlBar> containing two buttons, one to expand all rows and one to collapse all rows.
As before, <mx:GroupingField> is used to define the grouping levels. In the previous example a single level of grouping was used, here two are used (to group by customer, and then by order id within customer). In the previous example <mx:GroupingField> had no child tags, because simple grouping was used. Here, <mx:SummaryRow> has been added to each <mx:GroupingField> so as to summarize data by those groups. <mx:SummaryRow> can display summary data at the group level, as well as at the first or last member within the group, as specified by the "summaryPlacement" attribute. A <mx:SummaryRow> contains one or more fields to be summarized. Here a single <mx:SummaryField> is used for each <mx:SummaryRow> to "SUM" the total of that group, putting the result in a column named "Total". The "operation" attribute specifies the summary to be performed, and AVG, COUNT, MAX, MIN, and SUM are all built-in and ready for use. It is also possible to perform your own calculations, specifying an ActionScript function to be called instead of one of the built-in operations.
And as before, <mx:columns> is used to list the columns within the <mx:AdvancedDataGrid>. But here, two non-database columns have been added. An empty column has been inserted at the front of the list. This forces <mx:AdvancedDataGrid> to display the tree in its own column, rather than in the actual data column (and this technique can be used whether or not summary data is being displayed). In addition, a row named "Total" has been added to the end of the column list to display the summary totals. The <mx:SummaryField> tags point to the "Total" as the destination for calculated summary data. This is optional, the "Total" column could have been omitted (both from the <mx:columns> list and from the <mx:SummaryField> tags) in which case the summary values would have been displayed within the field being summarized (in this example the "PRICE" column).
As you can see, adding summary data to an <mx:AdvancedDataGrid> is not at all difficult once grouping has been implemented.
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.
Great help. Thank you!
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
--- Ben
Thanks a lot. Your website is heaven sent!