Work around to achieve cellhover effect

[alastairwalkerParticipant]

Hi – jqxGrid has the property of cellhover
(i.e. cellhover Function null
Callback called when a cell is hovered.
Code example
Set the cellhover property.
$(‘#jqxGrid’).jqxGrid({ cellhover: function (cellhtmlElement, x, y) {}});
Get the cellhover property.
var cellhover = $(‘#jqxGrid’).jqxGrid(‘cellhover’); )

In jqxTree we have enableHover
(i.e. enableHover Boolean true
Enables or disables the hover state.
Code examples
Set the enableHover property.
$(‘#jqxTree’).jqxTree({ enableHover: true });
Get the enableHover property.
var enableHover = $(‘#jqxTree’).jqxTree(‘enableHover’); )

This behaviour, is of course, not quite the same.

I am trying to implement a tooltip feature to support jqxTree, as I have successfully done for jqxGrid, using the cellhover property.

The important feature in cellhover is the callback function, detecting the cell over which the pointer is hovered.

Is there a work around for jqxTree to achieve a similar effect i.e. to detect the row of the tree?

Any guidance and direction here will be really appreciated!

Many thanks, Alastair

[HristoParticipant]

Hello Alastair,

You could try to bind to the hover event on the item’s class.
Please, take a look at the snippet below:

$(".jqx-tree-item-li").on("mouseenter", function (event) {
	console.log(event.clientX, event.clientY);
});

Then you could use the specific position of the cursor to show the jqxTooltip there.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[alastairwalkerParticipant]

Many thanks! I will try this out!

Alastair

[alastairwalkerParticipant]

Hello – Hristo,

I have managed to get the event triggered to yield event.clientX and event.clientY positions.

I now need to identify the row specifically. I have looked at using the getItem method, but that still requires that I map the position information into element information.

i.e. //Invoke the getItem method.
// @param element (li tag)
var item = $(‘#jqxTree’).jqxTree(‘getItem’, element);

Do you have any suggestions as to how the position information can be mapped to element information, and so be able to use the getItem method?

Many thanks,
Alastair

[alastairwalkerParticipant]

Hi – Hristo,

I think I got it figured out. The method to use is:
hitTest Method
Gets an item at specific position. The method expects 2 parameters – left and top. The coordinates are relative to the document.
Parameter Type
left Number
top Number
Return Value
Object
Code example
Invoke the hitTest method.
var item = $(‘#jqxTree’).jqxTree(‘hitTest’, 10, 20);

By passing the event.clientX and event.clientY information to this method I managed to get the item details.

Alastair

[Author]

Posts