nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

using mouserollover event in floating datagrid

eddiequinlan

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

Vind meer berichten getagd met

Accepted answers

All comments

EendrulatGH

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?

eddiequinlan

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

kenbuja

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

eddiequinlan

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

azgis

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

eddiequinlan

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

kenbuja

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;
}

eddiequinlan

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

RobertScheitlin__GISP

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.