How to highlight cell and its class not be reset?

Tags: #<Tag:0x00007f343bcbc0e8>

Hello,
I’m trying to set a cell red by adding to the td’s class attribute using a function like:

function highlightCellError(index, col, error) {
var td = hot.getCell(index, col);
$(td).addClass(“error”);
$(td).qtip({
content: errorMessages[error],
position: { my: “bottom left”, at: “center top”},
style: {classes: “qtip-tipsy qtip-rounded”}
});
}

but the effect is not permanent. The behavior is seemingly random as to when the class effect will be removed. In testing, I see that if any cell content is updated with a call like:

  	hot.setDataAtRowProp(index, 'desc', descriptionString);

following this highlightCellError function call, then all the cells in the table are “reset” and the cell color disappears. How can a cell’s color be made to be permanent?
Thanks.

Hi @gregorokorn_handsont

Have you checked our conditional formatting tutorial? If you need to pass any custom styling of a cell that is based on

  • value (display value other than in the editor)
  • structure (display something extra)

then you can use the custom renderer.

If, however, you just want to add a class you can use the afterChange hook like so https://jsfiddle.net/AMBudnik/6sq9rjze/ to attach a new className via setCellMeta.

You can also use the mechanism of validation provided by Handsontable. Can you share some more details about the error class? Where and when should it be applied?