Hi, I am experiencing an issue with handsontable, I try and load ~198 rows to a table object via js and it gets cut off at around ~56 but in a very weird way.
Attached is an image of the result (I have edited out sensitive data, just text data)
I am using the latest version of handsontable.
Even when I inspect it in chrome dev tools, the tbody element of the handsontable table is limited to this many rows, so it’s clearly not rendering all 198 rows.
Please help,
Zlatko
Hi Zlatko. Would you be able to send me a demo (without the sensitive data)? To load a dataset with a predefined number of columns and rows you can use our helper
Handsontable.helper.createSpreadsheetData(rows, columns)
Example https://jsfiddle.net/7vzj6w5g/
Hi Aleksandra
It took me a bit to extract the code as its part of a much bigger app, but I could not reproduce the issue. I eventually figured out that the handsontable virtual rederer doesn’t play well with angularjs (which is obvious). I turned off the virtual rederer but the page loads very slow now and the row number still stops at 52 rows although the entire table renders now, which is great.
I think the best way is to create a custom renderer for the table, what I want to do is essentially wrap it inside a $scope.$apply call and call the default handsontable renderer, do you get me?
What would be the best way to do this? I am looking at https://handsontable.com/docs/8.0.0/demo-custom-renderers.html currently…
Hope that explains it a bit better!
Zlatko
Hey @zlatko
did you use the renderAllRows() to block virtual rendering? If so, have you also tried https://handsontable.com/docs/8.0.0/Options.html#viewportRowRenderingOffset / https://handsontable.com/docs/8.0.0/Options.html#viewportColumnRenderingOffset?
You can also try to call another render() when the table is already loaded or add a fixed height for the table.
Thanks for the reply, I tried both of the options and I am getting a similar result to what I did before. However, the row numbers are still getting cut off at 52 rows (which is the max visible height of the body initially) even though all of the records are rendered now in the table.
Any help with the renderers? Can I plug into an event when each row renders?
Thanks,
Zlatko
Here is a codepen that displays a similar issue (not exactly the same)
https://codepen.io/zlatkolakisic/pen/zYqeGae
The virtual repeater seems to restart at 98 rows which is the maximum number in the look (not even 198) I know outside of angularjs handsontable can handle substantially more rows. Maybe you will have more insight.
Edit: 52 rows is the exact height of the viewport. Could this be an issue that it stops rendering because it doesn’t know there is a scroll?
Thanks,
Zlatko
I see that you’re using AngularJS with Handsontable 7.4.2.
Have you tested the AngularJS wrapper for Handsontable https://github.com/handsontable/ngHandsontable? We do not update it often but it allows to display Handsontable properly.
I tried but it had an older version of handsontable with it when i tried, what does the latest version include?
Thanks,
Zlatko
We’ve updated the AngularJS wrapper recently and now it supports all the versions of Handsontable (till 8.0.0). You can try to download an older version and then update one version after another to check if everything is OK. If you would have any issues with upgrading the version I’ll do by best to help to sort it out.
Thanks for the update, I tried the script and it seems there is still a UI conflict with something that I am using.
I did manage to solve it though. I created another html file, referenced the hadnsontable css and js and added the div where the table will be rendered. Then in the parent window in the angularjs controller, I added a reference to the window object with the method I call to setup the entire table with the data. I also added an iframe tag and in the iframe I call the render method from the parent frame and pass in the handsontable object that was created.
The iframe is set to 100% height and width of the viewport and now everything loads perfectly. A possible solution to these issues for anyone in the future…
Zlatko
Thank you for sharing the update @zlatko. I’m sure that your investigation will help other users. Even when the thread ifs not updated and it gets closed the content is still accessible.
