jQuery UI Widgets Forums Navigation Tree Work around to achieve cellhover effect

This topic contains 4 replies, has 2 voices, and was last updated by  alastairwalker 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • alastairwalker
    Participant

    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


    Hristo
    Participant

    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


    alastairwalker
    Participant

    Many thanks! I will try this out!

    Alastair


    alastairwalker
    Participant

    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


    alastairwalker
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.