2 Replies Latest reply on Mar 10, 2008 11:35 AM by David Repas

    AdvancedDataGrid - create Array (cfquery) with children for hierarchical data set

    David Repas Level 1
      I'm trying to create an AdvancedDataGrid with a hierarchical data set as shown below. The problem that I am having is how to call the data from a ColdFusion remote call and not an ArrayCollection inside of the Flex app (as below). I'm guessing that the problem is with the CFC that I've created which builds an array with children. I assume that the structure of the children is the issue. Any thoughts?

      Flex App without Remoting:
      http://livedocs.adobe.com/labs/flex3/html/help.html?content=advdatagrid_10.html

      <?xml version="1.0"?>
      <!-- dpcontrols/adg/GroupADGChartRenderer.mxml -->
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">

      <mx:Script>
      <![CDATA[
      import mx.collections.ArrayCollection;

      [Bindable]
      private var dpHierarchy:ArrayCollection= new ArrayCollection([
      {name:"Barbara Jennings", region: "Arizona", total:70, children:[
      {detail:[{amount:5}]}]},
      {name:"Dana Binn", region: "Arizona", total:130, children:[
      {detail:[{amount:15}]}]},
      {name:"Joe Smith", region: "California", total:229, children:[
      {detail:[{amount:26}]}]},
      {name:"Alice Treu", region: "California", total:230, children:[
      {detail:[{amount:159}]}
      ]}
      ]);
      ]]>
      </mx:Script>

      <mx:AdvancedDataGrid id="myADG"
      width="100%" height="100%"
      variableRowHeight="true">
      <mx:dataProvider>
      <mx:HierarchicalData source="{dpHierarchy}"/>
      </mx:dataProvider>
      <mx:columns>
      <mx:AdvancedDataGridColumn dataField="name" headerText="Name"/>
      <mx:AdvancedDataGridColumn dataField="total" headerText="Total"/>
      </mx:columns>

      <mx:rendererProviders>
      <mx:AdvancedDataGridRendererProvider
      dataField="detail"
      renderer="myComponents.ChartRenderer"
      columnIndex="0"
      columnSpan="0"/>
      </mx:rendererProviders>
      </mx:AdvancedDataGrid>
      </mx:Application>



      CFC - where I am trying to create an Array to send back to the Flex App

      <cfset aPackages = ArrayNew(1)>
      <cfset aDetails = ArrayNew(1)>

      <cfloop query="getPackages">
      <cfset i = getPackages.CurrentRow>
      <cfset aPackages = StructNew()>
      <cfset aPackages
      ['name'] = name >
      <cfset aPackages ['region'] = region >
      <cfset aPackages
      ['total'] = total >

      <cfset aDetails = StructNew()>
      <cfset aDetails
      ['amount'] = amount >
      <cfset aPackages ['children'] = aDetails >
      </cfloop>
      <cfreturn aPackages>


        • 1. Re: AdvancedDataGrid - create Array (cfquery) with children for hierarchical data set
          ericbelair Level 1
          I had similar problems attempting to create an Array of Arrays in a CFC, so I created two differents scripts - one in CF and one in Flex - to build Hierarchical Data from a query result. The script in CF builds an Hierarchical XML document which is then easily accepted as HIerarchical Data in Flex. The script in Flex loops over the query Object that is returned as an Array Collection. It took me so long to create the XML script, and I now regret it, since it is not easy to maintain and keep dynamic. However, it only took me a short while to build this ActionScript logic, which I quite like now (though it is not [ yet ] dynamic, and currently only handles two levels of Hierarchy):

          (this is the main part of my WebService result handler)....

          // Create a new Array Collection to store the Hierarchical Data from the WebService Result
          var categories:ArrayCollection = new ArrayCollection();

          // Create an Object variable to store the parent-level objects
          var category:Object;

          // Create an Object variable to store the child-level objects
          var subCategory:Object;

          // Loop through each Object in the WebService Result
          for each (var object:Object in results)
          {
          // Create a new Array Collection as a copy of the Array Collection of Hierarchical Data
          var thisCategory:ArrayCollection = new ArrayCollection(categories.toArray());

          // Create a new instance of the Filter Function Class
          var filterFunction:FilterFunction = new FilterFunction();

          // Create Filter on the Array Collection to return only those records with the specified Category Name
          thisCategory.filterFunction = filterFunction.NameValueFilter("NAMETXT", object["CATNAMETXT"]);

          // Refresh the Array Collection to apply the Filter
          thisCategory.refresh();

          // If the Array Collection has records, the Category Name exists, so use the one Object in the Collection to add Children to
          if (thisCategory.length)
          {
          category = thisCategory.getItemAt(0);
          }
          // If the Array Collection has no records, the Category Name does not exist, so create a new Object
          else
          {
          // Create a new parent-level Object
          category = new Object();

          // Create and set the Name property of the parent-level Object
          category["NAMETXT"] = object["CATNAMETXT"];

          // Create a Children property as a new Array
          category["children"] = new Array();

          // Add the parent-level Object to the Array Collection
          categories.addItem(category);
          }

          // Create a new child-level Object as a copy of the Object in the WebService Result
          subCategory = object;

          // Create and set the Name property of the child-level Object
          subCategory["NAMETXT"] = object["SUBCATNAMETXT"];

          // Add the child-level Object to the Array of Children on the parent-level Object
          category["children"].push(subCategory);
          }

          // Convert the Array Collection to a Hierarchical Data Object and use it as the Data Provider for the Advanced Data Grid
          advancedDataGrid.dataProvider = new HierarchicalData(categories);
          • 2. Re: AdvancedDataGrid - create Array (cfquery) with children for hierarchical data set
            David Repas Level 1
            Thanks for the info - I'll give that solution a try.


            David