topic Re: Flex Sychronizing map and datagrid interaction problem in ArcGIS API for Flex Questions

Flex Sychronizing map and datagrid interaction problem

TristanForward2 — Sun, 12 Dec 2021 07:43:21 GMT

When I hover over a point on the map it is highlighted in the datagrid, but when I hoverover a point in the datagrid it does not highlight the point on the map. I believe something is wrong with my findGraphicByAttribute function, I have tried changing the if statement around but to no avail. Any suggestions?

Thanks.

This code was taken from the following site and modified.
http://blogs.esri.com/Dev/blogs/arcgisserver/archive/2009/02/19/Sychronizing-map-and-datagrid-interaction-with-the-ArcGIS-API-for-Flex.aspx

var results:ArrayCollection = new ArrayCollection;
          
          function onResult(featureSet:FeatureSet, token:Object = null):void
          {
           if (featureSet.features.length > 0)
           {
            for each (var myGraphic3:Graphic in featureSet.features)
            {
             //Adds a mouseover event for the graphic
             myGraphic3.addEventListener( MouseEvent.MOUSE_OVER, onMouseOver );
             myGraphic3.addEventListener( MouseEvent.MOUSE_OUT, onMouseOut );
             
             myGraphic3.symbol = resultsSymbol;
             myGraphicsLayer.add(myGraphic3);
             results.addItem(myGraphic3.attributes);
             map.addLayer(myGraphicsLayer);
             
             dg.visible = true;
             dg.dataProvider = results;
             
             function onMouseOver( event : MouseEvent ) : void
             {
              var graphic : Graphic = Graphic( event.target );
              graphic.symbol = highlightSymbol;
              
              for each( var attributes : Object in dg.dataProvider )
              {
               if (attributes === graphic.attributes)
               {
                dg.selectedIndex = (dg.dataProvider as ArrayCollection).getItemIndex(attributes)      
               }
              }          
              dg.scrollToIndex(dg.selectedIndex);
             }
             
             function onMouseOut( event : MouseEvent ) : void
             {                  
              Graphic( event.target ).symbol = resultsSymbol;            
              dg.selectedIndex = -1;     
             }
            
             function onItemRollOver( event : ListEvent ) : void
             {
              findGraphicByAttribute(event.itemRenderer.data).symbol = highlightSymbol;              
             }
             
             function onItemRollOut( event : ListEvent ) : void
             {
              findGraphicByAttribute(event.itemRenderer.data).symbol = resultsSymbol;
             }
             
             function findGraphicByAttribute( attributes : Object ) : Graphic
             {
              for each (var graphic:Graphic in myGraphicsLayer.graphicProvider)
              {
               if (graphic.attributes == attributes)
               {
                return graphic;
               }
              }
              return null;
             }
             
            }

           }

Re: Flex Sychronizing map and datagrid interaction problem

Anonymous User — Mon, 23 May 2011 12:54:38 GMT

Try removing the OnRoll... events and the findGraphicByAttribute functions from the Onresult function.

Take a look at the example again to see what I mean:

http://serverapps.esri.com/flex/sync_gr_dg/srcview/index.html

Re: Flex Sychronizing map and datagrid interaction problem

BjornSvensson — Mon, 23 May 2011 13:50:33 GMT

Which versions of the Esri API and Adobe SDK are you using?

That specific blog article was written before 2.x of the ArcGIS API for Flex existed, and before the 4.x versions of Adobe Flex SDK were released.

Re: Flex Sychronizing map and datagrid interaction problem

TristanForward2 — Tue, 24 May 2011 13:51:25 GMT

I am using Flash Builder 4 and ArcGIS API for Flex 2.3.1.

I made a newbie mistake...
After reviewing the code more I'm missing the following from my code

<mx:DataGrid id="resultsGrid" dataProvider="{queryTask.executeLastResult.attributes}"
                itemRollOver="onItemRollOver(event)"
                itemRollOut="onItemRollOut(event)"
                visible="{queryTask.executeLastResult != null}">
            <mx:columns>

I will add this to my code and report back on what happens.

Thanks.

Re: Flex Sychronizing map and datagrid interaction problem

TristanForward2 — Tue, 24 May 2011 18:29:42 GMT

So I have been still playing around with this...

I have added the following to the datagrid

itemRollOut="onItemRollOver(event)"
itemRollOver="onItemRollOut(event)">

I now get the following error

Type
1180: Call to a possibly undefined method onItemRollOut.
1180: Call to a possibly undefined method onItemRollOver.

Both of these are defined as functions above...

I have read that this error can mean that you have not imported all the necessary classes. I have double checked and looks like I have them all.

I was able to find this forum that is what I am trying to do. But they still have onItemRollOut defined the same way...

This code also has similar functionality to what I am looking for.

Re: Flex Sychronizing map and datagrid interaction problem

KenBuja — Sun, 12 Dec 2021 07:43:24 GMT

I have this functionality running in a couple of non-FlexViewer applications. In this example (only showing the relevant portions of the code) using Flash Builder 4.5 and the 2.3.1 API, I have created the datagrid newDG programmatically, then added the event listeners for click, roll over, and roll out.

var newDG:DataGrid = new DataGrid;
newDG.dataProvider = resultsArray;
newDG.addEventListener(ListEvent.ITEM_CLICK, newDG_ItemRollOver, false, 0, true);
newDG.addEventListener(ListEvent.ITEM_ROLL_OUT, newDG_ItemRollOut, false, 0 ,true);
newDG.addEventListener(ListEvent.ITEM_ROLL_OVER, newDG_ItemRollOver, false, 0, true);

            protected function newDG_ItemRollOut(event:ListEvent):void
            {
                graphicLayer.clear();
            }

            protected function newDG_ItemRollOver(event:ListEvent):void
            {
                var highlightedGraphic:Graphic = findGraphicByAttribute(event.itemRenderer.data);
                var glowFill:SimpleFillSymbol = new SimpleFillSymbol;
                var glower:AnimateFilter = new AnimateFilter(highlightedGraphic,glow);
                
                glower.motionPaths = kf;
                glower.duration = 500;
                glower.play();
              }

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

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
       
        <s:GlowFilter id="glow" blurX="20" blurY="20" alpha="1" strength="100" color="0xff0000"/>
        <fx:Vector id="kf" type="spark.effects.animation.MotionPath">
            <s:SimpleMotionPath id="smpAlpha" property="alpha" valueFrom="1" valueTo="0"/>
            <s:SimpleMotionPath id="smpBlurX" property="blurX" valueFrom="20" valueTo="0"/>
            <s:SimpleMotionPath id="smpBlurY" property="blurY" valueFrom="20" valueTo="0"/>
        </fx:Vector>
        
    </fx:Declarations>

Re: Flex Sychronizing map and datagrid interaction problem

TristanForward2 — Sun, 12 Dec 2021 07:43:27 GMT

@KenBuja OK so I was able to get it to run without errors using the code you provided.

I added
dg.addEventListener(ListEvent.ITEM_CLICK, dg_ItemRollOver, false, 0, true);
dg.addEventListener(ListEvent.ITEM_ROLL_OUT, dg_ItemRollOut, false, 0 ,true);
dg.addEventListener(ListEvent.ITEM_ROLL_OVER, dg_ItemRollOver, false, 0, true);

as well as the following code.

I think there is something wrong in my function findGraphicByAttribute(attributes:Object):Graphic but I'm not to sure.

The most frustrating thing is the first part of the code works (the mouse events) but not the second half... any thoughts would be most appreciated.

//Creates graphic for each point, adds attribute data for each point to array
          var results:ArrayCollection = new ArrayCollection;
          
          function onResult(featureSet:FeatureSet, token:Object = null):void
          {
           if (featureSet.features.length > 0)
           {
            for each (var myGraphic3:Graphic in featureSet.features)
            {
             //Adds a mouseover event for the graphic
             myGraphic3.addEventListener( MouseEvent.MOUSE_OVER, onMouseOver );
             myGraphic3.addEventListener( MouseEvent.MOUSE_OUT, onMouseOut );
             
             myGraphic3.symbol = resultsSymbol;
             myGraphicsLayer.add(myGraphic3);
             results.addItem(myGraphic3.attributes);
             map.addLayer(myGraphicsLayer);
             
             dg.visible = true;
             dg.dataProvider = results;
             
             function onMouseOver( event : MouseEvent ) : void
             {
              var graphic : Graphic = Graphic( event.target );
              graphic.symbol = highlightSymbol;
              
              for each( var attributes : Object in dg.dataProvider )
              {
               if (attributes === graphic.attributes)
               {
                dg.selectedIndex = (dg.dataProvider as ArrayCollection).getItemIndex(attributes)      
               }
              }          
              dg.scrollToIndex(dg.selectedIndex);
             }
             
             function onMouseOut( event : MouseEvent ) : void
             {                  
              Graphic( event.target ).symbol = resultsSymbol;            
              dg.selectedIndex = -1;     
             }
            
             function dg_ItemRollOut(event:ListEvent):void
             {
              findGraphicByAttribute(event.itemRenderer.data).symbol = resultsSymbol;
             }
             
             function dg_ItemRollOver(event:ListEvent):void
             {
              findGraphicByAttribute(event.itemRenderer.data).symbol = highlightSymbol;
             }
             
             function findGraphicByAttribute(attributes:Object):Graphic  
             {
              for each (var graphic:Graphic in myGraphicsLayer.graphicProvider)
             {
              if (graphic.attributes == attributes)
              {
               return graphic;
              }
             }
             return null;
             }
            }
             
            }