How to scroll to cell before rendering?

[gregoire.spiers (Joseph Budin)]

Hi there !

I would like to scroll my table to a given cell. I use the scrollViewPortTo function to do so.
However, I also want to refresh the table periodically. When I do so, the table first loads, and then scrolls to the given cell. It results in a very short flickering where during a few miliseconds, the table is left aligned, before scrolling.

Is there a way to avoid this flickering ?
My idea was to scroll before the rendering, but it does not seem to work.

Is there a way to do this ?

Yours,

[gregoire.spiers (Joseph Budin)]

And a bonus if we can scroll to a cell and center it in the table

[aleksandra_budnik]

Hi @gregoire.spiers

Do you set a dark background for the DIV or use heavy logic? In general, the flickering should not be visible.

Here https://jsfiddle.net/zcLf1sr4/1/, we have a 1000 x 1000 table, and after 1 second, we are scrolled to position 500, 500 - there is no flickering.

When it comes to the 2nd question the scrollviewportTo() has 2 option

• verticalSnap
• horizontalSnap

but they all have option for table edges. Not for placing the cell in the center.
However, to place the cell in the center you may use the new API.

In version 14.6.0, we introduced 12 new methods for reading row and column indexes, which will help developers understand what the user is currently viewing and interacting with. It has enabled the reading of renderable indexes as well as partially and fully visible ones.

Partially visible indexes

• getFirstPartiallyVisibleRow
• getFirstPartiallyVisibleColumn
• getLastPartiallyVisibleRow
• getLastPartiallyVisibleColumn

Fully visible indexes

• getFirstFullyVisibleRow
• getFirstFullyVisibleColumn
• getLastFullyVisibleRow
• getLastFullyVisibleColumn

Rendered visible indexes

• getFirstRenderedVisibleRow
• getFirstRenderedVisibleColumn
• getLastRenderedVisibleRow
• getLastRenderedVisibleColumn

Based on the values (last + first) / 2, you get the middle of the table (more or less, as some cells might be a bit wider due to content.

[gregoire.spiers (Joseph Budin)]

g row and column indexes, which will help developers understand what the user is currently viewing

Concerning the flickering, the issue is more that we use a timeout of 0, and we still see the table being rendered on the top-left corner before being scrolled to our cell.
For instance : on this jsfiddle https://jsfiddle.net/56hurLq2/2/, when I type Ctrl + S in order to re-render the table, I can see the A column for a fraction of a second, and only then, it scrolls to the SG column.

[aleksandra_budnik]

What about the use of viewportColumnRenderingOffset and viewportRowRenderingOffset (or renderallRows, renderAllColumns)? Cells will already be in the DOM (but as we know, that might be heavy). Otherwise, we cannot set the position of the viewport before the table is rendered.