1 Reply Latest reply on Nov 28, 2006 3:45 PM by ntsiii

    Dynamic accordion with dynamic datagrid

    Shane McMurray
      I’m trying to create a dynamic accordion with embedded datagrids in each accordion area. I have the base working but have 2 problems I can’t seem to figure out.

      Bases; the accordion uses a repeater and vbox with a custom component from a webservice result set to create the accordion. The custom component has another webservice that gets a value from the repeater to pass it to the custom component.

      My 2 problems:

      1. how do I prevent the custom component from running the webservice until the accordion item is clicked or the area is visible? Otherwise I end up will a bunch of queries hitting the DB and if there is several items for the accordion and many items from the datagrid its slower.
      2. how can I get the datagrid query to refresh when the accordion item is clicked? Because the data may change I am not able to see the updated data unless I reload the entire application.

      1 thing I did try. With the tab control you can use the show() event and the data will refresh just fine, but with the accordion, the show() event does not seem to fire. Its as if they are all visible.

      Any help here would be much appreciated, I’ve been racking my brain for days now and I sure it is something simple that I am missing. Thanks in advance.

      See the example code below.


      the application code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
      layout="absolute"
      width="100%"
      height="100%"
      initialize="ws.getMethod1.send()"
      xmlns:output="com.comp.*">

      <mx:Script>
      <![CDATA[

      import mx.controls.Alert;

      [Bindable]
      public var thisWsdl:String = ' http://localhost/webservice/service.cfc?wsdl';

      ]]>
      </mx:Script>


      <mx:WebService id="ws"
      wsdl="{thisWsdl}"
      useProxy="false"
      showBusyCursor="true"
      fault="Alert.show(event.fault.faultString, 'Error');"
      concurrency="multiple" requestTimeout="30">
      <mx:operation name="getMethod1">
      <mx:request>
      <param1>{param1data}</param1>
      <param2>{param2data}</param2>
      <param3>{param3data}</param3>
      </mx:request>
      </mx:operation>
      </mx:WebService>

      <mx:Accordion width="100%" height="100%" fillColors="[#808080, #808080]">
      <mx:Repeater id="rp" dataProvider="{ws.getMethod1.lastResult}">
      <mx:VBox label="{String(rp.currentItem.catname)}" backgroundColor="#C0C0C0" width="100%" height="100%" paddingRight="10">
      <output:comp catid="{rp.currentItem.catid}"/>
      </mx:VBox>
      </mx:Repeater>
      </mx:Accordion>

      </mx:Application>


      the component code:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
      width="100%"
      height="100%"
      focusIn="ws.getMethod.send()"
      horizontalAlign="center"
      backgroundColor="#FFFFFF">

      <mx:Script>
      <![CDATA[

      import mx.controls.Alert;

      [Bindable]
      public var thisWsdl:String = ' http://localhost/webservice/service.cfc?wsdl';
      [Bindable]
      public var catid:int;

      ]]>
      </mx:Script>


      <mx:WebService id="ws"
      wsdl="{thisWsdl}"
      useProxy="false"
      showBusyCursor="true"
      fault="Alert.show(event.fault.faultString, 'Error');"
      concurrency="multiple" requestTimeout="30">
      <mx:operation name="getMethod2">
      <mx:request>
      <catid>{catid}</catid>
      </mx:request>
      </mx:operation>
      </mx:WebService>

      <mx:DataGrid id="itemGrid" dataProvider="{ws.getMethod2.lastResult}" width="700" height="250">
      <mx:columns>
      <mx:DataGridColumn width="100" dataField="itemid" headerText="Item Id"/>
      <mx:DataGridColumn wordWrap="true" dataField="itemname" headerText="Item Name"/>
      </mx:columns>
      </mx:DataGrid>

      </mx:VBox>