put draw extent and sync with datagrid sample together

MikeJun — Mon, 16 May 2011 20:38:17 GMT

I created a button to select a graphic(points) with polygon extent. What I'd like to do is when it selects points, its attributes are populated in datagrid and highlight corresponding graphic when mouse over on an each item in datagrid.

I got it to work except highlight corresponding graphic from datagrid.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:esri="http://www.esri.com/2008/ags"
    layout="horizontal"
    creationComplete="doQuery()">

    <mx:initialize>
     <![CDATA[
      drawToolbar.activate(Draw.EXTENT);
     ]]>
    </mx:initialize>
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import com.esri.ags.geometry.MapPoint;
            import com.esri.ags.geometry.Extent;
            import com.esri.ags.events.DrawEvent;
            import mx.controls.Alert;
            import com.esri.ags.Graphic;
            import mx.rpc.AsyncResponder;
            import com.esri.ags.tasks.Query;
            import com.esri.ags.tasks.QueryTask;
            import com.esri.ags.tasks.FeatureSet;
            import mx.events.ListEvent;

            private function doQuery():void
            {
                queryTask.execute(query, new AsyncResponder(onResult, onFault));
                function onResult(featureSet : FeatureSet, token:Object = null):void
                {
                    for each(var graphic:Graphic in featureSet.features)
                    {
                        myGraphicsLayer.add(graphic);
                    }
                }
                function onFault(info:Object, token:Object = null) : void
                {
                    Alert.show(info.toString());
                }
            }

            private function drawEndHandler(event:DrawEvent):void
            {

                var extent:Extent = event.graphic.geometry as Extent;
                var graphic:Graphic;
                var results:ArrayCollection = new ArrayCollection;
                for (var i:Number = 0 ; i < myGraphicsLayer.numChildren ; i++)
                {
                    graphic = myGraphicsLayer.getChildAt(i) as Graphic;
                    //if point is contained within extent, highlight it and add for display in results list
                    if (extent.contains(MapPoint(graphic.geometry)))
                    {
                        graphic.symbol = highlightedSymbol;
                        results.addItem({CITY_NAME: graphic.attributes.CITY_NAME, STATE_NAME:graphic.attributes.STATE_NAME});

                    }
                    //else if point was previously highlighted, reset its symbology
                    else if (graphic.symbol == highlightedSymbol)
                    {
                        graphic.symbol = defaultSymbol;
                    }
                }
                labelPoints.text = "# of points in extent = " + results.length;
                dg.visible = true;
                dg.dataProvider = results;

           }

           //Sync map and datagrid interaction
   private var highlightedGraphic:Graphic;

            private function onItemRollOver(event:ListEvent):void
            {
                if (highlightedGraphic) { highlightedGraphic.symbol = resultsSymbol; }
                highlightedGraphic = findGraphicByAttribute(event.itemRenderer.data)
                highlightedGraphic.symbol = highlightedSymbol;
            }

            private function onItemRollOut(event:ListEvent) : void
            {
                findGraphicByAttribute(event.itemRenderer.data).symbol = resultsSymbol;
            }

            public function findGraphicByAttribute(attributes:Object):Graphic
            {
                for each( var graphic:Graphic in myGraphicsLayer.graphicProvider)
                {
                    if (graphic.attributes === attributes)
                    {
                        return graphic;
                    }
                }
                return null;
            }


        ]]>
    </mx:Script>

    
        <esri:SimpleMarkerSymbol id="defaultSymbol" color="0x0000FF" style="circle" size="12" alpha="0.5">
            <esri:SimpleLineSymbol/>
        </esri:SimpleMarkerSymbol>

        <esri:SimpleMarkerSymbol id="highlightedSymbol" color="0xFF0000" style="circle">
            <esri:SimpleLineSymbol/>
        </esri:SimpleMarkerSymbol>

        <esri:SimpleFillSymbol id="sfs" style="solid" alpha="0.5" color="0x000000">
            <esri:SimpleLineSymbol color="0xFF0000"/>
        </esri:SimpleFillSymbol>

        <esri:SimpleMarkerSymbol id="resultsSymbol" style="circle" size="24" alpha="0.8" color="0x52F3FF"/>

        <esri:Draw id="drawToolbar" map="{myMap}" fillSymbol="{sfs}" drawEnd="drawEndHandler(event)"/>
    

    <esri:QueryTask id="queryTask" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0" />
    <esri:Query id="query" where="STATE_NAME = 'Washington'" returnGeometry="true" outSpatialReference="{myMap.spatialReference}">
     <esri:outFields>
             <mx:String>CITY_NAME</mx:String>
             <mx:String>STATE_NAME</mx:String>
            </esri:outFields>
    </esri:Query>

    <mx:VBox width="100%" height="100%">
        <mx:Text text="Draw a rectangle to select points within an extent" fontSize="12" fontWeight="bold" width="100%"/>
        <esri:Map id="myMap">
            <esri:extent>
                <esri:Extent xmin="-125.9" ymin="44.6" xmax="-114.6" ymax="50.2">
                    <esri:spatialReference>
                        <esri:SpatialReference wkid="4326"/>
                    </esri:spatialReference>
                </esri:Extent>
            </esri:extent>
            <esri:ArcGISTiledMapServiceLayer
                url="http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"/>
            <esri:GraphicsLayer id="myGraphicsLayer"/>
        </esri:Map>
    </mx:VBox>
    <mx:VBox width="240" height="100%">
        <mx:Text id="labelPoints" fontSize="12" fontWeight="bold" width="100%"/>
        <mx:DataGrid id="dg" width="100%" height="100%" itemRollOut="onItemRollOut(event)" itemRollOver="onItemRollOver(event)"
         dataProvider="{queryTask.executeLastResult.attributes}" visible="false">
            <mx:columns>
                <mx:DataGridColumn dataField="CITY_NAME"/>
                <mx:DataGridColumn dataField="STATE_NAME"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>


</mx:Application>

Re: put draw extent and sync with datagrid sample together

TracySchloss — Tue, 04 Oct 2011 20:30:51 GMT

I know this is an older post. Did you ever get this to work?

topic Re: put draw extent and sync with datagrid sample together in ArcGIS API for Flex Questions

put draw extent and sync with datagrid sample together

Re: put draw extent and sync with datagrid sample together