6 Replies Latest reply on Sep 11, 2009 1:14 PM by lee704

    Making one datagrid dependent upon selecteditem of another datagrid

    lee704 Level 1

      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.

       

      Can someone please tell me what I am missing on the code below?

       

      The CFC and the MXML 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>

       

       

      Thanks for your help.

        • 1. Re: Making one datagrid dependent upon selecteditem of another datagrid
          Andrew Rosewarn Level 3

          Its been along day so forgive me if I've missed it, but where are the event handlers for clicking on the artist datagrid which should cause your service to be sent?

           

          Andrew

          • 2. Re: Making one datagrid dependent upon selecteditem of another datagrid
            lee704 Level 1

            Nope, you did not miss it, it is just not there.  So if I added a ChangeHandler to the artistList DataGrid (see below), what would the function that calls the handler be?

             

             

             

             

             

            <mx:DataGrid id="artistList"

            x="0" y="0"

            height="132"

            change="artistListChangeHandler(event)">

             

            Thanks!

            • 3. Re: Making one datagrid dependent upon selecteditem of another datagrid
              Andrew Rosewarn Level 3

              You need to listen for a itemClick event on the artists datagrid.  Looks like you have the parameter bound to your your datacall.  So on the item click you need to send your service call

               

              Andrew

              1 person found this helpful
              • 4. Re: Making one datagrid dependent upon selecteditem of another datagrid
                lee704 Level 1

                Andrew... thanks, but I am lost.  Could you edit the code I posted or send me an example?

                 

                Thanks!

                • 5. Re: Making one datagrid dependent upon selecteditem of another datagrid
                  lee704 Level 1

                  Can you suggest a tutorial/example of how to do this using ColdFusion and Flex?

                  • 6. Re: Making one datagrid dependent upon selecteditem of another datagrid
                    lee704 Level 1

                    I was able to figure it out.   Below is the code I used.  I hope this helps someone.

                     

                    ***************** 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;
                       import mx.controls.Alert;

                       private var currentIndex:int=0;
                       private var args:Object=new Object();

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

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

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

                       private function getArt_result(event:ResultEvent):void
                       {
                        this.dgArtList.dataProvider=event.result as ArrayCollection;
                        this.dgArtList.selectedIndex=this.currentIndex;
                       }

                       private function artistListChangeHandler(event:Event):void
                       {
                        args.artistid=dgArtistList.selectedItem.ARTISTID;
                        this.roArt.getArt(args);
                       }
                      ]]>
                    </mx:Script>

                    <mx:RemoteObject id="roArtist"
                          showBusyCursor="true"
                          destination="ColdFusion"
                          source="cfartgallery.src.cfc.artist">
                      <mx:method name="getArtists"
                           result="getArtists_result(event)">
                      </mx:method>
                    </mx:RemoteObject>

                    <mx:RemoteObject id="roArt"
                          showBusyCursor="true"
                          destination="ColdFusion"
                          source="cfartgallery.src.cfc.art">
                      <mx:method name="getArt"
                           result="getArt_result(event)">
                      </mx:method>
                    </mx:RemoteObject>


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

                      <mx:Label x="0"
                          y="10"
                          text="Artists"/>

                      <mx:DataGrid id="dgArtistList"
                          x="0"
                          y="30"
                          change="artistListChangeHandler(event)">
                       <mx:columns>
                        <mx:DataGridColumn dataField="ARTISTID"
                               headerText="ArtistID"/>
                        <mx:DataGridColumn dataField="FIRSTNAME"
                               headerText="First Name"/>
                        <mx:DataGridColumn dataField="LASTNAME"
                               headerText="Last Name"/>
                       </mx:columns>
                      </mx:DataGrid>


                      <mx:Label x="0"
                          y="210"
                          text="Art"/>

                      <mx:DataGrid id="dgArtList"
                          x="0"
                          y="230">

                       <mx:columns>
                        <mx:DataGridColumn dataField="ARTID"
                               headerText="ArtID"/>
                        <mx:DataGridColumn dataField="ARTISTID"
                               headerText="ArtistID"/>
                        <mx:DataGridColumn dataField="ARTNAME"
                               headerText="Art Name"/>
                        <mx:DataGridColumn dataField="DESCRIPTION"
                               headerText="Description"/>
                        <mx:DataGridColumn dataField="PRICE"
                               headerText="Price"/>
                       </mx:columns>
                      </mx:DataGrid>


                    </mx:Canvas>
                    </mx:Application>

                     

                    *************************** art.cfc ***********************************

                     

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

                     

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

                            <cfquery datasource="cfartgallery" name="result">
                            SELECT orders.orderid,
                                    artname, orderitems.price,
                                    customerlastname || ', ' || customerfirstname AS customer
                            FROM orders, orderitems, art
                            WHERE orders.orderid=orderitems.orderid
                                AND orderitems.artid=art.artid
                            ORDER BY customer, orders.orderid
                            </cfquery>

                            <cfreturn result>
                        </cffunction>

                     

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

                      <cfreturn qArt>
                    </cffunction>


                    </cfcomponent>

                     

                    ******************************* 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
                       ORDER BY artistid ASC
                      </cfquery>

                      <cfreturn qArtists>
                    </cffunction>

                    </cfcomponent>