topic using mouserollover event in floating datagrid in ArcGIS API for Flex Questions

using mouserollover event in floating datagrid

eddiequinlan — Thu, 15 Apr 2010 15:16:55 GMT

I have a standard parcel mapping app where the user can query parcels and it's attributes. As of now, the results are displayed in a datagrid (mouseover functions work) and a floating datagrid(seperate mxml). The data passes fine to the floating datagrid, but I don't understand/figure out how to use the same mouseover functions to work with the floating datagrid..... and viseversa with the map graphics to show a mouseover event in the floating datagrid. Basically, how do the two mxml pass the info back and forth between each other?

Sincerely,
Eddie

Re: using mouserollover event in floating datagrid

RobertScheitlin__GISP — Thu, 15 Apr 2010 16:41:40 GMT

Eddie,

You probably are not using the Sample Flex Viewer but it sound like you have some development knowledge so you can take a look at my enhanced Search Widget and take apart the code in there as I have a floating datagrid that interacts with graphics and vice versa.

http://resources.esri.com/arcgisserver/apis/flex/index.cfm?fa=codeGalleryDetails&scriptID=16599

using mouserollover event in floating datagrid

eddiequinlan — Thu, 15 Apr 2010 16:51:04 GMT

Hi Robert,

Thanx for the response. I have looked at your code in the past and you've been a terrific help. However, I'm still baffeled at the communication between the two mxml files. I'm fairly confident I'm missing an import."something", or a global var, or passing the data, etc..... As a matter of fact the floating datagrid is your code and my app does send the data. I'm just stuck!!!! doh!

Eddie

using mouserollover event in floating datagrid

KenBuja — Sat, 11 Dec 2021 14:56:39 GMT

I have an application (http://ccma.nos.noaa.gov/gv_stjohn/stjohn_biomapper.html) that has a datagrid in a separate popup window. If I move the mouse over the datagrid, a graphic on the screen will be highlighted. Also, if I move the mouse over a graphic on the map, the corresponding row in datagrid will be highlighted.

The popup window contains variables where I pass in the the map and the graphic layer

[Bindable] public var MainMap:Map
[Bindable] public var layerROVGraphics:GraphicsLayer;

In my main application, I set up a variable for the popup window and pass in the variables

private var popData:DataPopup = new DataPopup;
PopUpManager.addPopUp(popData,this,false,PopUpManagerChildList.POPUP);
popData.MainMap = MainMap; 'MainMap is the <esri:Map> id
popData.layerROVGraphics = layerROVGraphics; 'this is a graphics layer with a MouseEvent.ROLL_OVER event listener attached to each graphic

This is the MouseEvent.ROLL_OVER function for the graphics

private function onMouseOver(event:MouseEvent):void
{
    var graphic:Graphic = Graphic(event.target);
    for each (var attributes:Object in popData.dataGrid.dataProvider)
    {
        if (attributes["OBJECTID"] == graphic.attributes["OBJECTID"])
        {
            popData.dataGrid.selectedIndex = (popData.dataGrid.dataProvider as ArrayCollection).getItemIndex(attributes)
        }
    }
    popData.dataGrid.scrollToIndex(dataGrid.selectedIndex)

And finally, in the datagrid in the floating window, this is the itemRollOver event

private function onItemRollOver(event:ListEvent): void
{
    highlightedGraphic = findGraphicByAttribute(event.itemRenderer.data, layerROVGraphics);
// code to make the graphic glow
}

private function findGraphicByAttribute(attributes:Object, graphicLayer:GraphicsLayer):Graphic
{
    for each (var graphic:Graphic in graphicLayer.graphicProvider)
    {
        if (graphic.attributes["OBJECTID"] == attributes["OBJECTID"])
        {
            return graphic;
        }
    }
    return null;
}

using mouserollover event in floating datagrid

eddiequinlan — Thu, 15 Apr 2010 18:21:51 GMT

Hi Kenbuja,

I think what you showed below will solve my problem. I can't test it right now, because I'm waiting for the key code for my Flex builder. I should get my license in a day or so, and I'll try your suggestion. I think the two bindable public var in the popup window is what I am lacking; without them I'm assuming the mouse events are not "picked up" by the popup window. Thanx again, and I'll post what happens as soon as I get my license.

Sincerely,
Eddie

using mouserollover event in floating datagrid

JamesFaron — Sat, 11 Dec 2021 14:56:41 GMT

I am also having an issue with graphics in the floating datagrid, in the Querybuilder widget. I used Roberts enhanced search widget as my basis. I created the floating datagrid, and the csv save function works as well. But I am stuck on getting a rollover function that I have working with the datagrid if it is the viewstack of the query to work in the floating grid (renamed QueryWidgetFloatingDG.mxml).

The grid is activated with the following script:

private function showGridResults(event:MouseEvent):void{

    if(!myfloatdg){
      var myfloatdg:QueryBuilderWidgetFloatDG;
      myfloatdg = QueryBuilderWidgetFloatDG(PopUpManager.createPopUp(map,QueryBuilderWidgetFloatDG,false));
      PopUpManager.centerPopUp(myfloatdg);
      myfloatdg.dProvider = QBData.dataProvider;
     }else{
      PopUpManager.addPopUp(myfloatdg,map,false);
      PopUpManager.centerPopUp(myfloatdg);
     }

  }

This following code works to produce a rollover effect in the widgets own datagrid:

private function onItemRollOver(event:ListEvent):void
   {
    var gr:Graphic = findGraphicByAttribute(event.itemRenderer.data)
    gr.symbol = highlightSymbol;
    QBData.selectedIndex = findInList(gr);
//    gr.symbol = sfs;

I derived the following from Roberts widget but it does not seem to help with the rollover function in the floating datagrid:

 
   if (myfloatdg){
        if(myfloatdg.datagrid.dataProvider)
         myfloatdg.datagrid.dataProvider.removeAll();
        myfloatdg.csvName = _csvName;
        myfloatdg.dgColumns = gridFields;
        myfloatdg.dProvider = fset.attributes;
        myfloatdg.graphicslayer = mqGraphicsLayer;
//        myfloatdg.zoomScale = zoomScale;
        myfloatdg.ownerWidget = QBWidget;
       }     
  }

And I added a mouseover function in imitation of Ken's script:

 private function onMouseOver(event:MouseEvent):void
  {
   var graphic:Graphic = Graphic(event.target);
   for each (var attributes:Object in myfloatdg.datagrid.dataProvider)
   {
    if (attributes["ID"] == graphic.attributes["ID"])
    {
     myfloatdg.datagrid.selectedIndex = (myfloatdg.datagrid.dataProvider as ArrayCollection).getItemIndex(attributes)
    }
   }
   myfloatdg.resultsGrid.scrollToIndex(QBData.selectedIndex)
  }

Sorry for the hack work. Any help will be greatly appreciated.

Thanks,
Jim Faron

Re: using mouserollover event in floating datagrid

eddiequinlan — Mon, 14 Jun 2010 16:28:23 GMT

Hi Ken,

I've been able to get back to my code and look at your suggestion. However, I'm confused as to how you are setting the variables.

private var popData:DataPopup = new DataPopup; ??? What class is DataPopup?????
PopUpManager.addPopUp(popData,this,false,PopUpManagerChildList.POPUP);
popData.MainMap = MainMap; 'MainMap is the <esri:Map> id

I'm not understanding how/where DataPopup came from and therefore i can't go forward with the rest of the variables.

thanx,
Eddie

Re: using mouserollover event in floating datagrid

KenBuja — Mon, 14 Jun 2010 17:32:27 GMT

Hi Eddie,

DataPopup is a MXML Component that I've created that is based on a TitleWindow (File|New|MXML Component). This component contains the variables referenced in the first code fragment

Re: using mouserollover event in floating datagrid

eddiequinlan — Mon, 14 Jun 2010 18:54:31 GMT

Hi Ken,

I suspected you were setting DataPopUp as a MXML Component and I set my popup MXML accordingly. Are you using the new flex 4? I am, and am having to set the titlewindow as s:TitleWindow. I noticed in the older flex versions it's refered to as mx:TitleWindow. I don't know if this would be an issue or not. I have noticed some minor difference's in the new version, where I've had to adjust my code.

As of now, I think the problem in my code is with this function

private function findGraphicByAttribute(attributes:Object, graphicLayer:GraphicsLayer):Graphic
{
      for each (var graphic:Graphic in graphicLayer.graphicProvider)
      {
            if (graphic.attributes["PATPCL_PIN"] == attributes["PATPCL_PIN"])
            {
                   return graphic;
            }
      }
return null;
}

When I run the app and move the mouse over the map graphic, I'm getting a null reference error. Anyway, thanx for trying and I appreciate the help.

Eddie

Re: using mouserollover event in floating datagrid

ErikEndrulat — Wed, 01 Jun 2011 14:45:01 GMT

I'm using the Flex 4.1 SDK, and am getting the same error that Eddie reported:

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at Function/oitt/private:onQueryResult/runQuery()
at oitt/onQueryResult()
at mx.rpc::AsyncResponder/result()
at com.esri.ags.tasks::QueryTask/handleExecute()
at Function/http://adobe.com/AS3/2006/builtin::call()
at com.esri.ags.tasks::BaseTask/handleResult()
at Function/com.esri.ags.tasks:BaseTask/esri_internal:sendURLVariables2/com.esri.ags.tasks:result()
at mx.rpc::Responder/result()
at mx.rpc::AsyncToken/http://www.adobe.com/2006/flex/mx/internal::applyResult()
at mx.rpc.events::ResultEvent/http://www.adobe.com/2006/flex/mx/internal::callTokenResponders()
at HTTPOperation/http://www.adobe.com/2006/flex/mx/internal::dispatchRpcEvent()
at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()
at mx.rpc::Responder/result()
at mx.rpc::AsyncRequest/acknowledge()
at DirectHTTPMessageResponder/completeHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

and also get this error following the mouseOver event on a point:

Error: Find criteria must contain at least one sort field value.
at mx.collections::Sort/findItem()
at mx.collections::ListCollectionView/getItemIndex()
at oitt/pointMouseOver()

Does anyone have any ideas for how to fix this?