Wrong Viewport after Update

Tags: #<Tag:0x00007efc626009b8>
#1

Hello,

we have experienced a problem with large tables using handson table, in our web side. When you have scrolled your page to the very right side and re-load data into the table, there are problems with the viewport. After re-loading the data, a wrong position of the table is displayed. Then the position of the slider and the viewport do no longer fit together. After clicking somewhere into the table, they synchronize and the viewport jumps to a wrong position.

We have build a small example, that shows the problem:


To reproduce the problem, press the load button to load the large table. Then scroll to the right end of the table. When pressing again at the reload button, the viewport jumps too far to the right side. So there is a big white space on the right side of the table, as you can see on the screenshot.

bug.png1019×198 8.17 KB

Thanks in advance

#2

Hi @florian.hassler

Unfortunately the demo is not working. Can you share a JSFiddle/JSBin version?
Do you experience the same behavior with all browsers?

#3

The example should work, when executed in a web server.
However, I have created a simpler Version with JSFiddle:
http://jsfiddle.net/7e9jf3v5/31/

Yes, it applies for all browsers.

#4

Thank you for sharing this example.

I think that the scrollViewportTo method can come in handy here.

Here’s a working demo: http://jsfiddle.net/Lmgb2e6k/

and docs: scrollViewportTo

#5

Thank you for your suggestion!
But I need to stay at the same viewport. Otherwise it would be too confusing for the user. I have extended your JSFiddle, to jump back to current cell, after loading the data.
http://jsfiddle.net/Lmgb2e6k/7/

But here we have again the same problem. The viewport jumps and a withe part on the right side of the table is displayed.
Furthermore we also have the problem here, that the position of the slider and the viewport do not fit together. And if you click afterwards into the table or press one of the arrow keys, the viewport and the slider jump again.
There is definitely a bug.

To serve some background: We are implementing calculated cells, depending on the value of other cells (e.g. sum) like you know from Microsoft Excel. So very often value changes are necessary and the user should not influenced by this calculations (by e.g. jumping viewports, etc.).

#6

Currently I am getting something like this:

Can you guide on what would be an expected result? You got an empty table?

When it comes to the length of the scrollbar there are some oddities regarding it’s length and positioning. More information about this subject can be reached at https://github.com/handsontable/handsontable/issues?utf8=✓&q=is%3Aissue%20is%3Aopen%20scrollbar

#7

I need the position of the cells on the screen to stay the same. I just want to change the value inside the cells, when reloading data.

#8

I tried to figure out what we can do, however as the first visible cell can be any cell of the grid it would need some viewport, like this: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport

#9

I don’t exactly know what you mean. This article is about detecting whether an element is inside the current viewport. How can this help to solve the problem?

I am sure that there is a bug in handsontable, that the wrong section of the table (viewport) is rendered, after setting new data for the table. I think there is some kind of constant value that is used as column width, and depending on the real width of the columns, it can happen that the wrong region of the table is rendered. It can even happen, that an area outside the table is rendered. The effect displays stronger, when there are a lot of cells on the left hand side of the table.

Is this forum the right place to report this bug?

Is there a workaround, till this bug gets fixed? For example a method to change the table data without re-rendering.

#10

I send a request to our developer for a second opinion.
I will reply you as soon as possible.

#11

Hi @florian.hassler

I just got a reply from our developer Piotr who told me that the issue may lay in the loadData itself.
I am changing the label to ‘bug’.

React HotTable: when updating data via Props, scrolling resets
#12

Please update to v 5.0.1+ the issue seem to be fixed in the newest version.

#13