Add Comment

Advanced DataGrid Tutorial

ColdFusion Tutorial #2

The enhancements to the data grids in Flex 3 have been eagerly anticipated, and are greatly appreciated - especially by us ColdFusion developers who spend so much time creating highly data-centric applications. I plan on providing examples of how to use the new data grids with ColdFusion, and here is the first.

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:

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

Art.cfc

I saved this component in the same folder. You can save it wherever you like, but of course you'll need to adjust the path in the MXML accordingly. This is just a simple CFC that returns a query.

Demo

See this code running!

Download

Download this code as a zip!

Comments

Question about summing things in a adg. If you wanted a "total" in the price column, on the category rows, how do you do that? I have an app that sorts employees into teams and lists the number of errors by employee. On the row with the team, I want to have the total errors, then click for the detail.
Jamie @ Saturday 19 Apr 2008 - 01:00:15 AM

Click button to add a comment

Author

Ben Forta

Published

Thursday 17 Apr 2008

Original

This tutorial has been modified and published with permission of the author. The original tutorial can be found here
http://www.forta.com/blog/index.cfm/2008/1/21/Grouping-Data-With-Flex-3-AdvancedDataGrid