Tuesday, October 07, 2008    
Home My Books Blog ColdFusion About Me Back    

Calendar
<< Jan 2008 >>
S M T W T F S
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

Search

Categories
 • Acrobat (2) [RSS]
 • Adobe (68) [RSS]
 • AdobeMAX06 (45) [RSS]
 • AdobeMAX07 (59) [RSS]
 • AdobeMAX08 (25) [RSS]
 • AIR (134) [RSS]
 • Appearances (122) [RSS]
 • Books (69) [RSS]
 • CFEclipse (14) [RSS]
 • ColdFusion (1153) [RSS]
 • Data Services (13) [RSS]
 • Fish Tank (2) [RSS]
 • Flash (106) [RSS]
 • Flex (372) [RSS]
 • Home Automation (3) [RSS]
 • Jobs (96) [RSS]
 • JRun (13) [RSS]
 • Labs (27) [RSS]
 • LiveCycle (22) [RSS]
 • MAX (160) [RSS]
 • Regular Expressions (13) [RSS]
 • RIA (11) [RSS]
 • SQL (38) [RSS]
 • Stuff (505) [RSS]
 • Tips (CF Studio) (80) [RSS]
 • Tips (CF) (795) [RSS]
 • Tips (Dreamweaver) (91) [RSS]
 • Tips (Flex Builder) (2) [RSS]
 • Using CF (137) [RSS]
 • Wireless (98) [RSS]

Other BLOGs
 • Charlie Arehart
 • Lee Brimelow
 • Ray Camden
 • Christophe Coenraets
 • Sean Corfield
 • Mihai Corlan
 • Cornel Creanga
 • John Dowdell
 • Danny Dura
 • Enrique Duvos
 • Steven Erat
 • Kevin Hoyt
 • Serge Jespers
 • Adam Lehman
 • Duane Nickull
 • Miti Pricope
 • Andrew Shorten
 • Ryan Stewart
 • James Ward
 • Greg Wilson
 • Full As A Goog

RSS Feeds
 • Feed
 • Subscribe

Join my mailing list and find out about new books and other topics of interest.

Thoughts, ideas, tips, musings, and pontifications (not necessarily in that order) by Ben Forta ...
NOTE: This is my personal blog, and the opinions and statements voiced here are my own.

Viewing By Entry / Main
January 21, 2008

Grouping Data With Flex 3 AdvancedDataGrid

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:

<cfcomponent>

   <cffunction name="getArtByMedia" access="remote" returntype="query">
      <cfset var result="">

      <cfquery datasource="cfartgallery" name="result">
      SELECT mediatype, artname, description, price
      FROM media, art
      WHERE media.mediaid=art.mediaid
      ORDER BY mediatype, artname
      </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. Here is 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.getArtByMedia();
         }
      ]]>
   </mx:Script>


   <!-- Define CFC -->
   <mx:RemoteObject id="svc"
            destination="ColdFusion" source="test.Art"
            result="gc.refresh()" />


   <!-- The grid -->
   <mx:AdvancedDataGrid width="100%" height="100%">

      <!-- Define grouping in dataProvider -->
      <mx:dataProvider>
         <mx:GroupingCollection id="gc" source="{svc.getArtByMedia.lastResult}">
            <mx:Grouping>
               <mx:GroupingField name="MEDIATYPE" />
            </mx:Grouping>
         </mx:GroupingCollection>
      </mx:dataProvider>

      <!-- The grid columns -->
      <mx:columns>
         <mx:AdvancedDataGridColumn dataField="MEDIATYPE"
            headerText="Media"/>

         <mx:AdvancedDataGridColumn dataField="ARTNAME"
            headerText="Name" />

         <mx:AdvancedDataGridColumn dataField="DESCRIPTION"
            headerText="Description" />

         <mx:AdvancedDataGridColumn dataField="PRICE"
            headerText="Price" textAlign="right" />

      </mx:columns>

   </mx:AdvancedDataGrid>

</mx:Application>

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

Related Blog Entries

TrackBacks
There are no trackbacks for this entry.

No trackback URL. Trackbacks are only allowed via interactive form.

Comments
Ben,

Thanks for this example. Here it is with live data from my blog (http://www.swphoto.net/advgrid/).
# Posted By Steve Walker | 1/21/08 11:50 AM
Do you know whether it is possible to show data next to the "closed folders"?

For example aggregated price/cost per mediatype. Also, display the number of sub items of a group in the AdvancedDataGrid could be of interest. Typical use would be accounting sheets, where you could drill down in the data. But then you'd need the summarised totals on the top level, not just the leaf nodes.

So far I haven't seen any documentation or examples showing this feature, which I'd thought would have been the main purpose for the AdvancedDataGrid control.
# Posted By Vegard Bakke | 1/22/08 6:20 AM
Yes, that is indeed possible, and that's the next example I plan on posting (as soon as I get a few moments to finish writing it, that is).

--- Ben
# Posted By Ben Forta | 1/22/08 9:08 AM
Eeexcellet! I'll keep a close eye on your blog, then.. :-)
# Posted By Vegard Bakke | 1/22/08 9:31 AM
Vegard, I just posted an example of this at http://www.forta.com/blog/index.cfm/2008/1/29/Summ...

--- Ben
# Posted By Ben Forta | 1/29/08 11:41 AM
As usual...Ben...thanks for the help. Spent a long trying to figure out why gc.refresh wouldn't work! ... then you explained why. I appreciate it very much.

Don
# Posted By Don Kerr | 2/11/08 10:11 PM
Ben -

I noticed this example is for remoteobject. How does one use do grouping for httpservice? I totally think Flex 3 (datagrid) is awesome with its perfomance (7000+ rows brought back and rendered in 4 - 6 seconds) with httpservice.
# Posted By Patrick Whittingham | 4/14/08 1:02 PM
Patrick, check out how to convert your httpservice result to an ArrayCollection, then feed the ArrayCollection to the ADG GroupingCollection dataProvider.
seeing passing data section here
http://livedocs.adobe.com/flex/3/html/help.html?co...

import mx.collections.ArrayCollection;
[Bindable]
public var myDP:ArrayCollection;
...
<mx:GroupingCollection id="gc" source="{myDP}">

I just don't have any sample code on converting the httpservice result to an ArrayCollection. XML to XMLllistCollection, yes, but not an ArrayCollection. Sorry.

Don
# Posted By Don Kerr | 4/14/08 5:25 PM
not sure what you're bringing back in your service, but here is an example of what I was referring to about reading httpservice data into an arrayCollection
http://flexonblog.wordpress.com/2007/12/29/read-da...
forgive me that it is a php service example.:) I only have CF example going to a XMLlistCollection, but it is basically the same thing. (httpservice result to arraycollection to groupingCollection dataProvider ).

I'm sure Ben has a better example.
Don
# Posted By Don Kerr | 4/14/08 6:23 PM
I decided to build a quick demo of bringing in xml data via HTTPSERVICE and using it as a dataProvider for
1) Nested mx:Repeater via XMLListCollection,
2) AdvancedDataGrid Hierarchy via HierarchicalData (XML hierarchical data)
3) AdvancedDataGrid Grouping (flat data grouped - could be flat query result from CFC )

http://www.fusionpage.com/flex/demos/bin/demos.htm...

Don
# Posted By Don Kerr | 4/14/08 10:11 PM

  © Copyright 1997-2008 Ben Forta, All Rights Reserved