topic Re: Datagrid onMouseOver and onMouseOut in ArcGIS JavaScript Maps SDK Questions

Datagrid onMouseOver and onMouseOut

MayJeff — Wed, 27 Aug 2014 13:28:38 GMT

I try to write a function for mouse over and mouse out datagrid. Here is JSFiddle:

Please help me to take a look what I need to change.

Thank you.

Re: Datagrid onMouseOver and onMouseOut

KenBuja — Wed, 27 Aug 2014 13:45:16 GMT

You have a couple of errors in your code. First, when using the "dojo/on" events, the event are usually in all lower case without the "on" prefix. Use the "mouseover" event.

grid.on("mouseover", onMouseOverHandler);

Second, you're initializing a new local variable "grid" in the "showResults" function

var grid = registry.byId("grid");

but you also have a global variable "grid", which you're trying to access in the "onMouseOverHandler" function. The global variable is never set to anything since you used a local variable. It should be like this

grid = registry.byId("grid");

You haven't defined "selectionLayer" anywhere.

Re: Datagrid onMouseOver and onMouseOut

RiyasDeen — Wed, 27 Aug 2014 13:51:40 GMT

Hi Jeff,

I have removed on from your line 127 and 128.

		grid.on("MouseOver", onMouseOverHandler);
		grid.on("MouseOut", onMouseOutHandler);

Is this what you are after?

Edit fiddle - JSFiddle

Re: Datagrid onMouseOver and onMouseOut

MayJeff — Wed, 27 Aug 2014 14:01:42 GMT

Thank you for your JSFiddle. How do I change the graphic symbol to sfs that I defined at the beginning of the code?

So when mouse over the datagrid, will highlight the polygon.

Thank you.

Re: Datagrid onMouseOver and onMouseOut

MayJeff — Wed, 27 Aug 2014 14:09:12 GMT

I found this old link for Highlighting a graphic when the user hovers over a row

Synchronizing map and data grid interaction with the ArcGIS API for JavaScript | ArcGIS Blog

Re: Datagrid onMouseOver and onMouseOut

RiyasDeen — Wed, 27 Aug 2014 14:47:34 GMT

Hi Jeff,

I have updated the fiddle to highlight on mouse over and out. I have changed your symbol color and style.

Edit fiddle - JSFiddle

Re: Datagrid onMouseOver and onMouseOut

KenBuja — Wed, 27 Aug 2014 14:58:16 GMT

However, it no longer highlights the parcel when you click on the extreme left column in a row.

Re: Datagrid onMouseOver and onMouseOut

RiyasDeen — Wed, 27 Aug 2014 15:09:28 GMT

Hi Ken,

Thanks for highlighting that. Since i was zooming in on mouse over (which is what click does), click event seems to be doing nothing.

Below Update.

Edit fiddle - JSFiddle

Jeff,

Since map.graphics always sits on top, i have moved your search results to selectionLayer and highligths to map.graphics, in the above fiddle.

Re: Datagrid onMouseOver and onMouseOut

RobertScheitlin__GISP — Wed, 27 Aug 2014 15:42:49 GMT

Riyas,

I am curious. Why not just set the symbol of the existing graphic instead of adding a new one, and then set it back on mouse out?

        function onMouseOverHandler(evt){
          if(evt.rowIndex == -1){
            return;
          }
          var rowId = grid.getItem(evt.rowIndex).PARCELID;
          //Loop through the graphics until you find the graphic with the ObjectID that matches
          //the selected row.
          arrayUtils.some(map.graphics.graphics,function(graphic){
            if ((graphic.attributes) && graphic.attributes.PARCELID === rowId) {
              graphic.setSymbol(sfs);
              return true;
            }
          });
        };

        function onMouseOutHandler(evt){
          arrayUtils.some(map.graphics.graphics,function(graphic){
            if (graphic.symbol == sfs) {
              graphic.setSymbol(symbol);
              return true;
            }
          });
        };

Edit:

I am just asking for my own sake, if just setting the existing graphics symbol would not be more optimized than adding a new graphic over the existing one?

Re: Datagrid onMouseOver and onMouseOut

RiyasDeen — Wed, 27 Aug 2014 15:52:11 GMT

Hi Robert,

Your's is the better way of doing it. Frankly din't occur to me then

Re: Datagrid onMouseOver and onMouseOut

RobertScheitlin__GISP — Wed, 27 Aug 2014 15:56:07 GMT

Riyas,

Thanks for the confirmation and being so willing to share and diagnose peoples code.

Re: Datagrid onMouseOver and onMouseOut

MayJeff — Wed, 27 Aug 2014 16:05:32 GMT

Thank you all for your help. It makes so clear now!

Re: Datagrid onMouseOver and onMouseOut

RobertScheitlin__GISP — Wed, 27 Aug 2014 16:16:24 GMT

May Jeff,

I unmarked my reply as the correct answer and marked Riyas's reply as correct, as he is the one that made all the main changes to your code. I just highjacked this thread for a minute to ask an opinion on my code change.

Re: Datagrid onMouseOver and onMouseOut

MayJeff — Wed, 27 Aug 2014 17:11:54 GMT

I go ahead to mark your helpful. I wish have a way to mark both.:)

Thanks again !

Re: Datagrid onMouseOver and onMouseOut

RiyasDeen — Thu, 28 Aug 2014 04:26:36 GMT

Rob,

Thanks for that.