[flexcoders] Making one datagrid dependent upon selecteditem of another datagrid in Flex/CF

[spuy...@ymail.com]

I am using Flex 3 with ColdFusion 8.  I need to make one DataGrid be dependent 
upon the SelectedItem of another DataGrid.  I have two DataGrid that use the 
included CFARTGALLERY datasource in ColdFusion.  The first DataGrid lists the 
ARTISTS while the second DataGrid lists the ART.  I need the ART DataGrid to 
display only those artworks that are related to the artists selected in the 
ARTISTS DataGrid.

So I basically need to load data in the first DataGrid, and then load data in 
the second DataGrid based on an argument passed through the onChange or onClick 
event.  The rub is, I don't know how to do this.  Is there a good example out 
there that covers this?

My current files are below:

 
///////////////////// artist.cfc ////////////////////////////

 
<cfcomponent>

 
<cffunction name="getArtists" output="false" access="remote" returntype="query">
  <cfargument name="artistid" required="false">
  <cfset var qArtists="">
  
  <cfquery name="qArtists" datasource="cfartgallery">
   SELECT     artistid, firstname, lastname
   FROM       artists
   WHERE  artistid > 0
   ORDER BY artistid ASC
  </cfquery>

  <cfreturn qArtists>
</cffunction>

 
<cffunction name="getArt" output="false" access="remote" returntype="query">
  <cfargument name="artid" required="false">
  <cfargument name="artistid" required="false" default="1">
  <cfset var qArt="">
  
  <cfquery name="qArt" datasource="cfartgallery">
   SELECT     artid, artistid, artname, description, price
   FROM       art
   WHERE   artistid = <cfqueryparam cfsqltype="cf_sql_integer" 
value="#arguments.artistid#">
   ORDER BY artid ASC
  </cfquery>

  <cfreturn qArt>

</cffunction>

 
</cfcomponent>

 
///////////////////////// cfartgallery.mxml ////////////////////////////

 
<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml";
    creationComplete="initComponent()"
    height="100%"
    width="100%">

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

   private function initComponent():void
   {
    refreshList(null);
   }

   public function refreshList(event:Event):void
   {
    this.dataManager.getArtists();
    this.dataManager.getArt();
   }

   private function getArtists_result(event:ResultEvent):void
   {
    this.artistList.dataProvider=event.result as ArrayCollection;
   }

   private function getArt_result(event:ResultEvent):void
   {
    this.artList.dataProvider=event.result as ArrayCollection;
   }
  ]]>
</mx:Script>

 
<mx:RemoteObject id="dataManager"
      showBusyCursor="true"
      destination="ColdFusion"
      source="cfartgallery.src.cfc.artist">
  <mx:method name="getArtists"
       result="getArtists_result(event)">
  </mx:method>    
  <mx:method name="getArt"
       result="getArt_result(event)">
   <mx:arguments>
    <artistid>
     {artistList.selectedItem.artistID}
    </artistid>
   </mx:arguments>       
  </mx:method>       
</mx:RemoteObject>

<mx:Canvas width="100%"
      height="100%"
      x="0"
      y="0">

  <mx:DataGrid id="artistList"
      x="0"
      y="0" height="132">
   <mx:columns>
    <mx:DataGridColumn dataField="ARTISTID"
           headerText="ARTISTID"
           id="artistID"/>
    <mx:DataGridColumn dataField="FIRSTNAME"
           headerText="FIRSTNAME"/>
    <mx:DataGridColumn dataField="LASTNAME"
           headerText="LASTNAME"/>
   </mx:columns>
  </mx:DataGrid>

  <mx:DataGrid id="artList"
      x="0"
      y="150" height="132">

   <mx:columns>
    <mx:DataGridColumn dataField="ARTID"
           headerText="ARTID"/>
    <mx:DataGridColumn dataField="ARTISTID"
           headerText="ARTISTID"/>       
    <mx:DataGridColumn dataField="ARTNAME"
           headerText="ARTNAME"/>
    <mx:DataGridColumn dataField="DESCRIPTION"
           headerText="DESCRIPTION"/>
    <mx:DataGridColumn dataField="PRICE"
           headerText="PRICE"/>           
   </mx:columns>
  </mx:DataGrid>

 
</mx:Canvas>

</mx:Application>