Hi @aleksandra_budnik, @adrian.szymanski,
I am using Handsontable in Angular application
I want to initialize handsontable instance once data is loaded from an API.
I don’t want to display blank handsontable on page load when there is no data loaded.
Is there any way to achieve this scenario?
Hi @sam
If I understand correctly you can just postpone the creation of the component like described at https://stackoverflow.com/questions/61322905/angular-8-render-child-component-after-data-required-is-fetched-through-http-ca
Thanks for quick reply. That solution solved my query.
However, now I’m facing different problem.
I’ve implemented same example for testing and it is working perfectly fine, but when I tried with HTTP response to bind with the handsontable it is not getting added into table.
Attaching the error I’m getting in the console.
Thanks in advance.
The same error was mentioned in this report https://github.com/handsontable/handsontable/issues/9138
Does it sound similar?
Hey @aleksandra_budnik,
It looks like similar issue.
In my case as well, when I tried same logic with static data it worked perfectly fine.
But when I integrated it with dynamic data and settings it is giving me that error also table is showing only with headers.
Can you please suggest solution to this issue ?
Thanks.
And did you try the mentioned approach at
https://stackblitz.com/edit/handsontable-angular-dmuh5j?file=app%2Fapp.component.ts. This seems to be working correctly though. Although it shows how I call the hot table since the table settings and data are dynamic.
It worked well for the issue author for dynamic data.
No, I’ve not tried the above approach.
You mean this block of code, right ?
Let me try and check if it’s working for me!
Hey @aleksandra_budnik ,
I tried the mentioned approach with both static and dynamic data.
For static data it is working fine, but getting same error when trying with dynamic data.
Can you please help resolve this issue?
Hi @aleksandra_budnik, @adrian.szymanski,
Can you please help with the above mentioned issue at the earliest ?
The error comes from a minified version so o is not defined does not tell us much. You’d need to load the non-minified version.
However, I wonder if the issue is gone if you replace
this.hotSetting.data = this.subsidiaryList
to
hot.loadData(this.hotSetting.data) (where hot is the reference to the instance)
I tried both the approaches you mentioned above but none of them resolved the issue.
So what else we can do to fix this issue ?
Would you be able to replicate the same issue using JSFiddle or any other JS playground? Then we could debug it together.
I don’t think I can reproduce the same issue on any JSFiddle as it is associated with lot of backend logic which returns dynamic data which will be shown to handsontable dynamically each time it is loaded.
Is there any other way to address the issue ?
A one step forward would be to load the non-minified version to check what is the full error message.
You can use this CDN resources
https://cdn.jsdelivr.net/npm/handsontable@12.0.1/dist/handsontable.full.js
https://cdn.jsdelivr.net/npm/handsontable@12.0.1/dist/handsontable.full.css
12.0.1 should be replaced with a full version number (current is 12.2.0)
I found the corresponding line in the code https://github.com/handsontable/handsontable/blob/d1f20a1d0917a8de7a9a6b5eab9ad9dfba264b96/handsontable/src/tableView.js#L1165. Please tell me did you alter any of the HTML elements of a column header? (for example using afterGetColHeader hook) Or do you use nestedHeaders?
Yes I’m using afterGetColHeader hook in my app.
Also there are multiple hooks I’m using as follow:
afterCreateRow, beforeRemoveRow, afterRemoveRow, afterFilter, afterOnCellMouseDown, afterSelectionEnd
Is there any issue with that ?
OK, I see. This is the older version of this demo https://handsontable.com/docs/javascript-data-grid/cell-renderer/ from paragraph Render custom HTML in header. That logic breaks if you use sorting like here https://jsfiddle.net/n7u8gard/ (once sorting is disabled, it works well). Why? Sorting adds it’s own element to the HTML structure of the header so if you set only the to TH.innerHTML it’s in conflict.
Understood!
Does this mean we can either render custom HTML in header or can have sorting for columns ?
Actually I’m only using custom HTML in header only for first column and rest of columns are normal.
Also I don’t want sorting on first column but require sorting for rest of the columns.
So is there any alternative to alter HTML header and have sorting for other columns (individual column sorting)?
