Redraw / Resize

Tags: #<Tag:0x00007f8b1dcdaa78>
#1

I’m using the handsontable core library directly (MIT version) … not one of the wrappers.

In the example shown in the video Im’ seeing some redraw problems on (1) window resize, and (2) on scroll

(1) Window Resize

As you can see when the window resizes (ie. the containing div) changes size, the table’s rendering surface is not updated, that is until I scroll it, then it redraws across the new size.

Is there a forceUpdate or redraw method anywhere I can call on the hot table instance? I’ve looked but can’t see anything. I’ve tried calling updateSettings with the new instance size, eg:

  const settings = { ...this.props.settings, width, height };
  if (this.table) {
    this.table.updateSettings(settings);
  }

but this makes things worse not better. This is all I could find when I went looking for some kind or redraw method. What’s the right way to do it?

(2) Scrolling

In the video you can see me scrolling slowly and the new rows do not uniformly render. Perhaps this is related to the window-size issue above, and it does not know automatically how many row to pre-render.

I have tried setting the:

viewportRowRenderingOffset: XXX,
viewportColumnRenderingOffset: XXX,

values, but this neither seems to fix the issue - and makes performance sluggish.

Any ideas or direction? Thanks!

For reference, here is how I’m configuring that table:

import Handsontable from 'handsontable';

const data = Handsontable.helper.createSpreadsheetData(1000, 100);
const settings = {
  data,
  rowHeaders: true,
  colHeaders: true,
  colWidths: 120,
  manualRowResize: true,
  manualColumnResize: true,
};

this.table = new Handsontable(this.el as Element, settings);

:cake:

#2

Thank you for doing the investigation and sharing the results, Phil.

Have you tried to call table.render() on the native window resize event?

1 Like
#3

OK cool - looks like table.render() deals to the (1) window resize issue. And settings viewportRowRenderingOffset: 20 deals to (2) the scrolling issue.

For some reason the horizontal scrolling with columns works fine with the auto viewportColumnRenderingOffset but the vertical viewportRowRenderingOffset needed to be tweaked by me.

Thanks @aleksandra_budnik

#4

You’re welcome @phil

For some reason the horizontal scrolling with columns works fine with the auto viewportColumnRenderingOffset

if your column width is not too narrow the autoColumnSize plugin is able to adjust the width correctly. But it depends on the data type and window size so it’s wise to remember about the offset methods.

#5