put draw extent and sync with datagrid sample together

[MikeJun]

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>

    <!-- Start Declarations -->
        <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)"/>
    <!-- End Declarations -->

    <esri:QueryTask id="queryTask" url="http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map..." />
    <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>

[TracySchloss]

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