Hovering events and API

[MarcParticipant]

I see events and API calls for selecting/unselecting and expanding/collapsing rows. Is there equivalent functionality for hovering/unhovering over rows (i.e., receive hover events for a row and programmatically generate hover events for a row)? Alternatively, is there a way to get the DOM element for a row so that similar functionality could be achieved through jQuery?

Thanks,

Marc

[Peter StoevKeymaster]

Hi Marc,

jqxGrid does not have hover events. However, there’s internal field that we use in the hover state implementation which holds the hovered row’s index.

Here’s how to get the index of the row under the mouse cursor:

var index = $("#jqxgrid").jqxGrid('hoveredrow');

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcParticipant]

Thanks Peter, I don’t think that will help in our situation. We have markers on a map indicating the locations of the same sites that are in the table. We want to highlight the map location when we hover over a table row and vice versa. Thus, we need to know when a row is being hovered over and be able to change the style of the row to the hover style. In our DataTables implementation, we were able to directly obtain the row’s DOM element and handle the hover event/set the CSS style using it. It sounds like there is not a way to do the equivalent with the grid widget?

Marc

[Peter StoevKeymaster]

Hi Marc,

There’s built-in hover style applied to the grid rows. The .jqx-grid-cell-hover style is applied to the cells of the hovered row.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcParticipant]

I made another attempt to implement a hover handler but have not been able to find a way to achieve my goal of notifying associated objects on the page when a row is hovered over. I am able to get mouseenter events for the grid rows, but for scrollable tables the index returned by getting the ‘hoveredrow’ is the index within the visible set of rows and not the logical index (e.g., if I have scrolled down 20 rows and hover over the top row then the ‘hoveredrow’ is 0 and not 20). Since my handler appears to execute first, it also returns the previous row hovered over rather than the current.

Unfortunately, it is not looking like this will be possible without being able to bind to rowhover/rowunhover in the same manner that handlers can be bound to rowselect/rowunselect (with the rowindex passed to the handler in the event args).

For the second part of the problem (highlighting a row in the table without selecting it), I can use ensurerowvisible to scroll the grid to make the target row visible, but I haven’t been able to determine a way to identify the div for the row so that I can set/clear the .jqx-grid-cell-hover style.

Thanks for any help you can provide.

Marc

[Peter StoevKeymaster]

Hi Marc,

Unfortunately, we don’t have hover events in jqxGrid and we are unable to suggest you a workaround for adding such events.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts