Scroll Jumping and Multi cell gets selected on cell click

vanivkulkarni · February 18, 2019, 7:06am

Hi Team,

I am facing couple of issues when using Handsontable for displaying of data:

If there is a large data, when I scroll down and click on a cell, it multi selects the cells in that columns. See the screenshot below:

image.png1332×465 14.8 KB

I tried the setting selectionMode: 'single' doesn’t help though.

Next issue I am facing, when I press enter on the cell, I have a function to generate the next number in the hierarchy, due to which I reload the data into handsontable, even on insert row, scroll jumps and comes back to selected cell.

I am using merge cells feature, it gets called after the data is loaded, as the data is dynamic, merge cells is called in updateSettings function of handsontable. Please let me know if you need some more inputs.

Thanks,
Vani

aleksandra_budnik · February 18, 2019, 7:28am

Hey @vanivkulkarni

Can you replicate the same issue in JSfiddle? I’d like to test it.

vanivkulkarni · February 19, 2019, 5:32am

Yeah, sure will do it and send it across. Since the data is dynamic and merging also is done dynamically, I will need some time to replicate and hard code the data to create the fiddle. Please bear with me.

aleksandra_budnik · February 19, 2019, 9:02am

Can you replace the data with our helper Handsontable.helper.createSpreadsheetData(1000, 1000)?

aleksandra_budnik · February 19, 2019, 9:02am

The simpler the example the easier it is to replicate the issue.

vanivkulkarni · February 21, 2019, 10:52am

Hi @aleksandra_budnik,

We think our application css was disturbing the handsontable behavior. I removed all the css and used basic features, looks like jumping issue is resolved. I will get back if it occurs again.

Thanks,
Vani

aleksandra_budnik · February 22, 2019, 9:40am

I’m glad that you’ve found the reason what that happened. Thank you for an update.

lharkleroad · February 28, 2019, 9:33pm

We have this same issue in our project. The behavior of the tables should not be negatively affected by custom CSS, but it’s calculating things from the wrong starting position. This scroll jumping issue is part of a bigger problem where certain features of handsontable do not work correctly when the table is nested within a container, particularly a container that has scrolling enabled.

I reported on a similar issue on HOT Github issues regarding the rendering of TextEditor, SelectEditor, and Comments elements. The gist of it is that the placement of these elements should be calculated relative to the container element, not the document. You can read about my solution here.

github.com/handsontable/handsontable

Issues with scrolling in a parent element

opened 09:36PM - 12 Jan 16 UTC

ohadb1

bug Scroll Core: Alignment / height / width Reported

We use handsontable for a few years as our main input table widget. We have mult…iple forms where we need to have synchronized scrolling with frozen row headers. To achieve that we used to generate the tables inside a div with a designated width and overflow-x, while each table is created within a child div with a large width and all columns rendered. This setup stopped working in version 0.20.3. with the following phenomena: 1. While the height of the hider in the left container is correct (fit the rows) the height of the holders in each of the clones is wrong. We got over that by enforcing the hider height on all holders at the afterRender hook callback. 2. When you scroll (horizontally), the afterScroll hook is fired only once, at the first scroll event but not on subsequent scrolls, although the onTableScroll of the overlay is fired everytime. It just gets to an execution flow without a refreshAll() call that drives the transformation of the left clone to the correct coordinates. This eliminates the header freezing effect. 3. When the parent horizontal scrolling is not zero, the positioning of the editor container div has wrong offset as it doesn't compensate for the scrolling status of the parent element (which is calculated correctly in other places in the code. We are open to other ways of setting synchronized scrolling of multiple tables, including with the built-in scroll bar, but there are other instances where the wrapping element is scrolled (often vertically), and then the editor positioning is wrong.

By the way, this has still not been fixed since it was posted almost a year ago.

For this particular issue of scroll jumping, there is a workaround until the proper positions are calculated. So @vanivkulkarni, don’t remove your custom CSS that you probably need for your site layout. Instead, disable scrolling in the afterSelection callback.

afterSelection: function(r, c, r2, c2, preventScrolling, selectionLayerLevel) {
preventScrolling.value = true;
}

Thanks,
Lance