cascading dropdown

SyedMasood_Khadri

Hi

I want to know how cascading dropdown lists (populate dropdown based on selection in another dropdown) can be populated with map service and ArcGIS Server FLEX API, and finally display the query.

for ex; country list in one dropdown, state list in another dropdown, display selected state from second dropdown on map..

thanks for the help in advance.

BenKane

The following example application does what you ask, but I used "region" instead of "country" to populate the state drop down.  Not all states are available in each of the regions, I just quickly put some from each area in the appropriate array.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      xmlns:s="library://ns.adobe.com/flex/spark"
      pageTitle="Query Task (with a map)">
 
 <s:layout>
  <s:VerticalLayout gap="10"
        horizontalAlign="center"
        paddingBottom="20"
        paddingLeft="25"
        paddingRight="25"
        paddingTop="20"/>
 </s:layout>
 
 <fx:Script>
  <![CDATA[
   import com.esri.ags.FeatureSet;
   import com.esri.ags.Graphic;
   
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.events.IndexChangedEvent;
   import mx.rpc.AsyncResponder;
   
   import spark.events.IndexChangeEvent;
   
   [Bindable] public var westStates:ArrayCollection = new ArrayCollection(['California','Arizona','Colorado','Washington','Oregon']);
   [Bindable] public var eastStates:ArrayCollection = new ArrayCollection(['New York','Pennsylvania','Virginia','Illinois','Maine']);
   [Bindable] public var southStates:ArrayCollection = new ArrayCollection(['Louisiana','Florida','Alabama','Mississippi','Texas']);
   [Bindable] public var regions:ArrayCollection = new ArrayCollection(['West','East','South']);
   [Bindable] public var statesArr:ArrayCollection = new ArrayCollection([westStates,eastStates,southStates]);
   
   public function changeStates(event:IndexChangeEvent):void
   {
    var index:int = event.currentTarget.selectedIndex;
    statesDDL.dataProvider = statesArr[index];
    if(!statesDDL.enabled)
    {
     statesDDL.enabled = true;
    }
   }

   private function doQuery():void
   {
    queryTask.execute(query, new AsyncResponder(onResult, onFault));
    function onResult(featureSet:FeatureSet, token:Object = null):void
    {
     // No code needed in this simple sample, since the
     // graphics layer is bound to the query result using
     // graphicProvider="{queryTask.executeLastResult.features}"
    }
    function onFault(info:Object, token:Object = null):void
    {
     Alert.show(info.toString(), "Query Problem");
    }
   }
  ]]>
 </fx:Script>
 
 <fx:Declarations>
  <!-- Layer with US States -->
  <esri:QueryTask id="queryTask"
      showBusyCursor="true"
      url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/5"
      useAMF="false"/>
  
  <esri:Query id="query"
     outSpatialReference="{myMap.spatialReference}"
     returnGeometry="true"
     text="{statesDDL.selectedItem}">
   <esri:outFields>
    <fx:String>MED_AGE</fx:String>
    <fx:String>POP2007</fx:String>
   </esri:outFields>
  </esri:Query>
 </fx:Declarations>
 
 <s:Panel height="60"
    backgroundColor="0xB2BFC6"
    title="Query a layer (search for a state)">
  <s:layout>
   <s:HorizontalLayout/>
  </s:layout>
  <s:DropDownList id="regionsDDL" width="150" prompt="Select a region" dataProvider="{regions}" change="changeStates(event)"/>
  <s:DropDownList id="statesDDL" width="150" prompt="Select a country" enabled="false" change="queryBTN.enabled = true;"/>
  <s:Button id="queryBTN" click="doQuery()" enabled="false" label="Do Query"/>
 </s:Panel>
 
 <esri:Map id="myMap">
  <esri:extent>
   <esri:Extent xmin="-14298000" ymin="2748000" xmax="-6815000" ymax="7117000">
    <esri:SpatialReference wkid="102100"/>
   </esri:Extent>
  </esri:extent>
  <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer"/>
  <esri:GraphicsLayer id="myGraphicsLayer" graphicProvider="{queryTask.executeLastResult.features}"/>
 </esri:Map>
 
</s:Application>