I have some javascript that changes the content of certain cells in a handsontable grid.
The issue I have found is that when I change the content of one of the cells the frozen column rows don't change accordingly.
Is there a function that can be run to check the sizes of each row and resize accordingly?
I have a Jsfiddle which shows the issue:
http://jsfiddle.net/JammyDodger231/145bL7ej/
var myData = Handsontable.helper.createSpreadsheetData(4, 20);
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
fixedRowsTop: 2,
fixedColumnsLeft: 2
});
//Hardcoded just to show issue, this isnt where the content would be changed
$('.htCore tbody tr:nth-child(2) td:nth-child(5)').html("Test <br /><br />");
Your problem is that you should NEVER manually change content or CSS on the table that Handsontable renders for you. It is a stateless table which will get overriden as soon as you make any changes that triggers a change event. Read this answer to get a more detailed description:
CSS applied on Handsontable grid row on Scroll is not working properly
What you should be doing instead is using the methods that Handsontable supplies to you. In your case, you can use hot.setDataAtCell(row, col, value)
. You could also directly change myData
since Handson uses a reference to it. Anything but manually changing the DOM.