Nester Headers Goes Missing, Dataset does not update with programmatic dataset refresh

Tags: #<Tag:0x00007f8b188f3748>
#1

Hello,

I am facing an issue with rendering the handsontable-pro (licensed version).
I have created angular material tabs in HTML and have defined handsontables with nested headers for some of the tabs.

Please advice how to refresh handsontable correctly from a different tab where handsontable is not visible.

Steps taken:

  • On first tab, when I click on a button to refresh data in handsontable, which is on a different tab, then sometimes rendering does not happen correctly.
    Column headers does show at times and it also does not resize the columns dynamically.

When I manually resize the column then it is getting rendered correctly (with column headers and latest dataset).

  • If I am on same tab where the handsontable is and if I load the data , then I see no issue.

I am defining the handsontable for each tab like below-

tableSettings: any = {
//rowHeaders: true,
renderAllRows: true,
colHeaders: true,
allowColumnResize : true,
viewportColumnRenderingOffset: 27,viewportRowRenderingOffset: “auto”,
colWidths: 50,
height: 450,
allowInsertColumn: false,allowInsertRow: true,allowRemoveColumn: false,allowRemoveRow: true,
autoWrapRow: false,autoWrapCol: false,
stretchH: “all”,
minSpareRows:true,
//maxRows: 5,
manualRowResize: true,manualColumnResize: true,
columns: […],
nestedHeaders:[…],
contextMenu: [‘copy’,‘row_above’,‘row_below’,‘undo’,‘remove_row’],
};

detectChanges = (hotInstance, changes, source) => {
hotInstance.render();
}

versions -
handsontable-pro - 6.2.3,
handsontable-pro/angular - 3.0.1,

tabl_after_dataset_refresh_without_headers
tabl_after_dataset_refresh_without_headers.png1890×684 88.7 KB
correct_with_headers
correct_with_headers.png1889×681 136 KB
nested_heades_not_spread_out
nested_heades_not_spread_out.png1882×690 98.2 KB

Thanks

#2

Hi @accounts2

Can you fill this demo with the nestedHeaders and columns definitionhttps://jsfiddle.net/handsoncode/6ngtqu3v/ ? That would be helpful to debug the issue.

#3

Hi - Thanks for your response. I have updated jsfiddle (https://jsfiddle.net/yow3bme8/) as requested.
Thanks

#4

Hi Aleksandra - Please advise.
jsfiddle (https://jsfiddle.net/yow3bme8/) was updated as requested earlier.

PS: I have created my account as “account2” is system account and I was missing earlier updates.

Nester Headers Goes Missing, Dataset do not update with programmatic dataset refresh
#5

no problem :slight_smile:

It looks like the data in the loadData method does not share the same pattern as defined via columns.

In lines 36-48 you define what keys of a data object Handsontable should use. Your new dataset has to have the same set of keys (or you should replace the columns settings with the new pattern).

Here https://jsfiddle.net/handsoncode/2a5dfum8/ I load the data as an object and the two first columns are filled

code change below

swapHotData() {
      //this.hotRegisterer.getInstance(this.id).loadData([['new', 'data']]); // old data
      this.hotRegisterer.getInstance(this.id).loadData([{startDate: '10/10/2020', endDate: '01/01/2020'}]) // new object data
    }
#6