Trigger code when cell is in view

Tags: #<Tag:0x00007efc64dd3e18> #<Tag:0x00007efc64dd3cd8>
#1

I am working with websockets to have multiple people edit the same sheet at the same time. To mark which cell each person is working on, I simply send a websocket request inside afterSelection(). I then use this information to set colored borders on the cell, as well as show the name of the person using tippy.js.

Now the problem I am facing is that the binding of tippy requires the cell to exist, which it does not if the user has scrolled to a different part of the sheet. Is there a clever way to perhaps bind the data to the cell as meta and the trigger the tooltip when the cell comes into view? I was hoping for some kind of scrollspy perhaps, but have had no luck.

There is also the afterScrollVertically() event but I am unsure how to get he cells on screen (the closest I have found is countVisibleRows()

#2

Hi @rene.sinnbeck

This is an interesting case, but I would need some clarification here. You mentioned that “the binding of tippy requires the cell to exist”, by this, do you mean that it needs to be visible in the viewport or just rendered at all? As Handsontable utilize row virtualization by default only the currently visible rows are being physically rendered.

However, if your dataset isn’t that big, you can turn it off by setting renderAllRows option to true in the configuration object. You can read more about this feature and other methods available here: https://handsontable.com/docs/javascript-data-grid/row-virtualization/

#3

Good idea, but sadly my content might grow quite in size. I am currently looking into trying to trigger it in the afterScrollVertically(). Aaron Francis was kind enough to share some code on how he did it, so I am trying to use that as a base for an idea :slight_smile:

#4

@rene.sinnbeck

I understand. I agree it might be worth trying. Let me know how it went or if you have any other questions :slight_smile:

#5

@adrian.szymanski

Sadly I struggle a bit with clearning up. If am currently adding the tooltip in beforeOnCellMouseOver as that gives me both the coordinate and the TD itself. Sadly I cannot find a good way to clean it up again, as the TD changes when scrolling.

Is there any other props are accessible from css apart from “class” ? I am thinking of simply using css to set the tooltip (using :after and content:)

#6

I ended up borrowing the tooltip from this answer, and it worked quite well :slight_smile:

   handleMouseOver(coords, TD) {
       if (coords.row < 0 || coords.col < 0) {
           return
       }

       const id = this.hot.getCellMeta(coords.row, coords.col).collaborator
       if (id && TD) {
           const collaborator = this.collaborators[id]
           const offset = TD.getBoundingClientRect().y + TD.offsetHeight

           this.tooltip.style.visibility = 'visible';
           this.tooltip.innerHTML = collaborator.name;
           this.tooltip.style.position = 'absolute';
           this.tooltip.style.top = `${offset}px`;
           this.tooltip.style.padding = '5px';
           this.tooltip.style.background = collaborator.color;
           this.tooltip.style.left = `${TD.getBoundingClientRect().x}px`;
       }
   }

   handleMouseOut(coords, TD) {
       this.tooltip.style.visibility = 'hidden';
   }
1 Like
#7

@rene.sinnbeck

That’s what I wanted to propose too. However, the version you linked is a bit outdated, so here’s our newer example of such implementation: https://jsfiddle.net/handsoncode/wmjsy2pL/

1 Like
#8

@adrian.szymanski

Thanks! Seems the same except for the setTimeout()? I will add that if needed :slight_smile:
I also made it hide on scroll

#9

Ah, I see, looked at the example linked in your message, which is an older version. The one that uses afterOnCellMouseOver is indeed practically the same, but mine runs on the newer version of Handsontable :slight_smile:

1 Like
#10