0

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

isapir
  • 21,295
  • 13
  • 115
  • 116

0 Answers0