I want to highlight modified rows in HandsOnTable.
I keep a non-visible column named "ismodified" that is initially set to false, and is set to true whenever the row is modified, and I created a renderer function:
function modifiedRowRenderer(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (instance.getData()[row].ismodified)
$(td).addClass('row-modified');
}
I have a settings object that contains the data and other options passed to the Handsontable plugin, so I hook up the renderer like so:
settings = { ... }
settings.cells = function(row, col, prop) {
var cellProperties = {};
cellProperties.renderer = modifiedRowRenderer;
return cellProperties;
}
$(container).handsontable(settings);
The problem is that it is extremely slow, to the point of being unusable.
Edit:
In the afterChange event handler I have a line that updates the ismodified property, like so:
this.setDataAtRowProp(row, 'ismodified', true);
It looks like that is the offending line which causes the widget to crash, because the setDataAtRowProp() seems to trigger a renderer call. Changing it to:
if (!this.getDataAtRowProp(row, 'ismodified'))
this.setDataAtRowProp(row, 'ismodified', true);
helps, but there has to be a better way.
How can I achieve this without hindering performance?
TIA,
Igal