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

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.

Find more posts tagged with

Accepted answers

RiyasDeen

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.

All comments

kenbuja

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

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

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

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.

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

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.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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