Upgrade from 6.2.2 to 7.4.2 - updateHotTable is not working

[haron]

Hi all,

I’m working on massive facelifting of our system (Angular SPA) implemented by another engineer. One of the pages contains 4 dynamically build hot-table elements. Trimming down everything this is the code to initialise them:
table.updateHotTable({ data: grid, colHeaders: colHeaders.map(col => col.label), rowHeaders: rowHeaders.map(row => row.label), className: 'htCenter', rowHeaderWidth: 125, stretchH: 'all', });

This is how they look using Angular 7, handsontable 6.2.2 and @handsontable/angular 3.0.0

And this is how they look after upgrade to Angular 8, handsontable 7.4.2 and @handsontable/angular 5.1.1

Sadly, I was unable to find much information about updateHotTable method to be able to fix the issue. Please guide me.

Thank you

[piotr.laszczkowski]

Hi @haron,
If table.updateHotTable refers to the HotTable internal method, everything works out of the ngZone lifecycle. You can use the HotTableRegisterer service instead. That allows getting a reference to the Handsontable instance. Having a reference, you can use the refreshDimensions() method to update the container’s size and adjust overlays.
Here is a link to our documentation, where we show how to use HotTableRegisterer https://handsontable.com/docs/angular-hot-reference/

By the way, did you consider using the latest version of Handsontable and its wrapper? Is there a reason why you picked Handsontable 7.4.2 / @handsontable/angular v5.1.1?

[aleksandra_budnik]

Hi @haron

do we have any updates on the subject?

[haron]

Hi @piotr.laszczkowski,

First of all, thank you for prompt reply! I’m sorry for slow reaction, a number of tasks of higher priority appeared recently.

Is there a reason why you picked Handsontable 7.4.2 / @handsontable/angular v5.1.1?

That’s because the project will be updated to recent versions step by step. Currently fixing everything to be compatible with Angular 8, then will be upgraded to Angular 9 and so on.

Here is a link to our documentation, where we show how to use HotTableRegisterer https://handsontable.com/docs/angular-hot-reference/

I carefully inspected the example, seems nice, however ideally I would prefer to avoid (our) component re-implementation. It was carefully crafted, and worked well. If possible, I’d like to only slightly alter it.

If table.updateHotTable refers to the HotTable internal method, everything works out of the ngZone lifecycle.

That was taken into account. setTimeout is used to run change detection after tables initialisation:

public ngAfterViewInit() {
    this.marginTables.changes.subscribe(tables => setTimeout(() => this.prepareTables('Margin'), 0));
}

Can I mail you sources of the component to avoid posting publicly?

Thank you

[aleksandra_budnik]

Hi @haron

You can send the code to support@handsontable.com (it is operated by me and @piotr.laszczkowski)

However, please remember that optimization guidance is a service for Clients with higher Support plans and a full code-review session is a separate service. To confirm if you have the plan please send the License ID or an email of the license holder.

[haron]

Hi @aleksandra_budnik,
Not sure management will be happy to pay for a licence as all they’re getting as a result of component update is broken system at the moment.
Apparently, there is a breaking change which is not documented. Could you help to restore old functionality?
It’s probably needless to say that otherwise other alternatives will be considered as the system doesn’t depend on Handsontable much.

[aleksandra_budnik]

@haron

you do not need to purchase anything now.

After you send the implementation we will be able to share some further possible approaches to solve the issue. That may end up with a recommendation to update to a newer version but not necessary. If we won’t be able to help with a given code sample we may need to proceed with a code review service. But only, if we both agree that we have time and resources to do it.

[haron]

@aleksandra_budnik
Oh, I see now. Thank you very much for understanding & support!
Please check mailbox.

=========

Thanks to Aleksandra the issue has been fixed.

After reading https://github.com/handsontable/handsontable/issues/3013 and https://handsontable.com/blog/articles/2016/3/a-complete-guide-to-changing-size-of-handsontable it became apparent that under certain conditions Handontable is unable to calculate its size property. Therefore my fix was pretty easy:

table.updateHotTable({
    data: grid,
    colHeaders: colHeaders.map(col => col.label),
    rowHeaders: rowHeaders.map(row => row.label),
    className: 'htCenter',
// see below:
    columnHeaderHeight: 24,
    rowHeights: 24,
    height: 4 + 24 + 24 * rowHeaders.length,
    rowHeaderWidth: 125,
    colWidths: 60,
    width: 125 + 60 * colHeaders.length,
});

Now it looks pretty much the same as v6: