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:

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 <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.

• Amcom (San Ramon Valley, CA) is looking for a senior ColdFusion developer. Requirements include 8+ years of software development experience, expert with ColdFusion 7, and familiarity with frameworks and design patterns. Flex familiarity preferred. Details posted online by Tariq Ahmed.
• Carolinas HealthCare System (Charlotte, NC) is looking for 4 ColdFusion developers for 4-6 month contracts, and the potential to convert to full-time positions. Requirements include 4+ years of experience with ColdFusion, proficiency with ColdFusion 6.1 or later, SQL Server experience, and strong JavaScript and CSS skills. Experience with Ajax, Flex, and Spry is a plus. Please contact one of the following agencies: Nathan Zientek at Ettain Group 704-731-8035, Michael Norton at Insight Global 704-357-3177, C.J. Comer at Pelican Technology Partners 704-543-1590, Paige Chappell at Quick Solutions 704-329-7277, Ryan West at Revolution Technologies 910-332-4126, Chris Seitz at Sherpa 704-374-0001, Jonathan Tucker at Tek Systems 704-357-4628.
• Vertex Pharmaceuticals (Cambridge, MA) is looking for a ColdFusion development. Requirements include a bachelors degree in computer science or a related field, 5+ years of ColdFusion experience, and strong JavaScript, CSS, AJAX and XML skills. Details posted online.

Last night's presentation in Raleigh was incredible! Almost 120 attendees packed the room (many had to stand or sit on the floor), and the event run for close to 3 hours! A lively crowd, great questions and feedback, excitement and enthusiasm - the one was lots of fun.

There are still lots more presentations and lots more venues, so be sure to check the complete location list.

AdvancedDataGrid supports group expanding and collapsing within grids, think of it as a grid with an embedded tree control. Multiple levels of grouping are supported (each level becomes a tree branch), but this example uses a single level for simplicity's sake.

The example uses the default database tables that come with ColdFusion 8, and here is the simple CFC method which just returns several columns from two tables:

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. Here is the MXML:

<mx:RemoteObject> points to the CFC. <mx:AdvancedDataGrid> defines the grid and columns, in much the same way as regular <mx:DataGrid> does. But unlike <mx:DataGrid>, here the dataProvider is passed as a child tag so as to be able to specify additional information. <mx:AdvancedDataGrid> can accept hierarchical data ready to be used for grouping, as well as flat data, in which case a GroupingCollection must be used so that Flex can regroup the data hierarchically. As ColdFusion queries are flat (non-hierarchical), a GroupingCollection is defined using <mx:GroupingCollection>. The GroupingCollection accepts one or more fields to be grouped on, and here a single field is specified using <mx:GroupingField>.

When using GroupingCollections like this, the data grid itself must explicitly be refreshed so that the changes are reflected in the displayed grid. According to the documentation, this example would do this as <mx:AdvancedDataGrid ... initialize="gc.refresh()">, but this does not seem to work. Instead, the refresh() method is specified in <mx:RemoteObject> so that it is called when data is received. (Thanks to Mike Nimer for figuring this one out for me!).

And there you have it, a really simple data grid with expand/collapse grouping.

• ADP Dealer Service (FT Lauderdale, FL) is looking for a ColdFusion developer. Requirements include 7+ years of ColdFusion, SQL Server, HTML, and JavaScript. Framework experience is also required, Mach-II is preferred. Contact Rubi Herlambang.
• Mentor Graphics (Wilsonville, OR) is looking for a ColdFusion / Flex developer. Requirements include a bachelors degree in a related field, 4+ years experience in ColdFusion application development (including use of Object Oriented design practices), and 1+ year producing web sites with advanced technologies including Flex and ActionScript. Details posted online.
• Melco (Denver, CO) is looking for a Flex developer. Requirements include 3+ years web / interactive development experience, ActionScript expertise, Flash Remote experience, and OOP proficiency. Contact Jay Lane at recruiter Tri-Worth Solutions.
• Avocent (Huntsville, AL) is looking for a Flex developer. Requirements include 3+ years web and Java development, experience with graphics manipulation and rendering, and knowledge of MVC. Experience with Flash/Flex a plus. Details posted online.
• Michigan State University, The Eli Broad College of Business (East Lansing, MI) is looking for a ColdFusion developer. Requirements include a bachelors degree, and 3+ years of experience with ColdFusion, Microsoft SQL, and JavaScript. Details posted online (search for job posting 1980).

The solution? Either of these two options should work:

• Run the wizard, select ColdFusion as the server technology, but don't check the option to use remote object access service. Then, open the project properties dialog, go to the Flex Compiler page, and add compiler flag: -services "C:\ColdFusion8\wwwroot\WEB-INF\flex\services-config.xml" (obviously changing the path as appropriate). This flag is what gets set by the wizard when you opt to use Flash Remoting.
• Run the wizard as you usually do. Then, open the project properties dialog, go to the Flex Compiler page, and change the Flex SDK version to use the Flex 3 SDK. (Although, I think the prior option is the safer one).