Datagrid onMouseOver and onMouseOut

[MayJeff]

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

Edit fiddle - JSFiddle

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

Thank you.

[KenBuja]

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.

[RiyasDeen]

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

[MayJeff]

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.

[MayJeff]

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

[RiyasDeen]

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

[KenBuja]

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

[RiyasDeen · Accepted solution]

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.

[RobertScheitlin__GISP]

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?

[RiyasDeen]

Hi Robert,

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