Custom renderer function not working in handsontable plugin

Question

I have a function that handles some onChange events and works well. That function calls another one to check for the contents of the cell, and if there is something wrong it should change the cell color.

function Check(x, y)
{
    var content =   $editorTableContainer.handsontable('getDataAtCell', y, x);
    var split   =   content.split(' ');    

    $.each(split, function (key, value) {
        $.get('check.php?word=' + value, function (data) {
            //blank if no error otherwise it returns an array of suggestions (only need to check if there is an error)
            if (data) {
                alert("test");
                var meta = $editorTableContainer.handsontable('getCellMeta', y, x);
                meta.renderer = ErrorRenderer;
            }
        });
    });

    return;
}

And here is my simple ErrorRenderer:

function ErrorRenderer(instance, td, row, col, prop, value, cellProperties)
{
  Handsontable.TextCell.renderer.apply(this, arguments);
  console.log(row);
  td.style.fontWeight = 'bold';
  td.style.color = 'green';
  td.style.background = '#CEC';
}

The ErrorRenderer is never called, eventhough the alert is triggered, any idea why?

Thank you

Answer 1

If you are using handsontable, why don't you use its built in functionality?

Have a look at HTs conditional formatting

Also, in version 0.9.5 a column option was added validator. Details here.

validator (value: Mixed, callback: Function) 

or

validator : RegExp Object

Then using the event (details here):

afterValidate (isValid: Boolean, value: Mixed, row: Number, prop: String, source: String) 

do the formatting of the cell

Also, in your example, you are setting the renderer, but is the cell actually being rendered? Do you need to re-render?