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.

Encuentra más publicaciones etiquetadas con

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

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

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.

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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