Dynamic accordion with dynamic datagrid

Question

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>

Answer 1

Perhaps you could use the change event of the accordion, or
the show event of the child containers?
Tracy