JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › assigning an event to EVERY cell

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 9, 2022 at 6:27 pm #103663
    edwardsmarkff
    Participant

    hello –

    i am trying to assign an ‘onMouseOver` event to every cell, both current and added cells:

    https://codepen.io/edwardsmarkf/pen/BarbYzb

    please click the “load 74” button, hover over any of the “error” cells and observe the desired behavior.
    then click “add new row” and notice the hover tooltip is not working in the new row cell.

    what is the best way to do assign a mouse event to every cell, both current and future?
    certainly creating an extra div like i got working is not a good solution!   😁

    i thought about seeing if there was some way we could assign a class name to a cell or something like that might be the way to go, or assign by data types, but i am not even sure if that is possible.

     

    • This topic was modified 2 years, 2 months ago by edwardsmarkff.
    September 10, 2022 at 6:12 pm #103665
    edwardsmarkff
    Participant

    i also tried this:

    https://codepen.io/edwardsmarkf/pen/Baxzaje

    but addEventListener does not seem to “stick”….

    September 12, 2022 at 2:38 am #103666
    edwardsmarkff
    Participant

    ok this does what i want:

    https://codepen.io/edwardsmarkf/pen/VwxjvME

    but its VERY clumsy.   hopefully one of the wizards at smart-html-elements can come up with a better way to associate a smart-tooltip with a cell.

    note:  for some reason, using “addEventListener” to a div (or any tag) in the grid does not seem to “stick”.  you can issue the command in the code or in the console, but the tag does not change.   so i decided to “split” the div and insert the extra characteristics in the middle.

    there HAS to be a better way to do this!

    September 12, 2022 at 11:19 am #103667
    svetoslav_borislavov
    Participant

    Hi,

    Take a look at this example: https://codepen.io/yavor_htmlelement/pen/dyVOEpY.
    In the example on every grid render a tooltip element for each cell is being created. You can implement your tooltip functionality this way.

    If you need further help, do not hesitate to contact us!

    Best Regards,
    Svetoslav Borislavov

    Smart UI Team
    https://www.htmlelements.com/

    September 12, 2022 at 4:56 pm #103669
    edwardsmarkff
    Participant

    could you please show me an example of the smart-tooltip on an editable cell that is added after the page renders?

    please see my example:  https://codepen.io/edwardsmarkf/pen/VwxjvME

    and click the “add 74” button and then ADD a new row.

     

     

    September 12, 2022 at 6:00 pm #103670
    edwardsmarkff
    Participant

    an issue i have experienced is that when you add a new row and you are using:

    template : function (formatObject)

    the new template does not seem to work properly until you click on some other field, then go back and click again on the field in question.  only then does the “template” seem to work.

    September 12, 2022 at 9:50 pm #103673
    edwardsmarkff
    Participant

    i THINK this will work:

    https://codepen.io/edwardsmarkf/pen/WNJGvwz

    imho the workaround is to set autoCreate to off to force the user to hover into the field, otherwise the tooltip would not open in a new cell.

    opinions, please…..!

    • This reply was modified 2 years, 2 months ago by edwardsmarkff.
    September 16, 2022 at 9:25 pm #103689
    edwardsmarkff
    Participant

    also required:   'allowEdit' : false

    https://codepen.io/edwardsmarkf/pen/WNJGvwz

    i get the impression you should not try to use allowEdit together with template, since the two seem to conflict.

    • This reply was modified 2 years, 2 months ago by edwardsmarkff.
  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.