Display error message in cell

[ferdinan...@gmail.com]

Hi !

I'm trying to display error messages in cell instead of native red-background for unvalid cells.  The idear is that when the user gives the focus to the cell, he gets again the wrong entry he wrote to correct it.

It appeared to me impossible to use validator, because as far as validator were executed, I could not get the reason for cells not being valid, and write the appropriate message (am I wrong ?)

I tried to use afterChange event, and td.innerHTML attribute. As I realized the error message were lost at the next call of renderer, I also wrote a custom renderer, assuming that all my error messages would start with "!" (I could not see any simple way to keep in memory that cells are not valid). But I get some crazy behaviour (like error message displaying on the wrong cell when scrolling, etc, etc.


Any idear to get a better way ? Thanks so much for helping.
Ferdinand



afterChange: function(changes, source){
    changes && changes.forEach(function (change) {
        row = change[0]
        col = $("tabName").handsontable('propToCol',change[1])
        error = ""
        val = change[3]
        if ( val !="" )
        {
               // Get the error message
        }
        var td = $("tabName").handsontable('getCell', row, col);
       

        if (error != "")
        {
            td.innerHTML = error
            td.style.color = "red"
            entry['isValid'] = false // si le champ est invalide, la ligne entière l'est
        } else
        {
            td.innerHTML = change[3]
            td.style.color = "black"
        }
    })
}

var errorRenderer = function (instance, TD, row, col, prop, value, cellProperties, types) {
        var isError = TD.innerHTML[0] == '!'
        if (!isError)
        {
                Handsontable.TextCell.renderer.apply(this, arguments);                   
        }
        else
            TD.style.color = "red"
    }

[trebuchetty]

you should probably add the error message to the cell properties (and a "hasError" boolean), then on render, lookup that cell's properties for the "hasError" bool and error message (cellProperties is passed into the renderer method).

So in afterChange:

        if (error != "")
        {
            td.innerHTML = error
            td.style.color = "red"
            entry['isValid'] = false // si le champ est invalide, la ligne entière l'est
        } else
        {
            td.innerHTML = change[3]
            td.style.color = "black"
        }

becomes:

        var cellProperties = $("tabName").handsontable('getCellMeta', row, col);

        if (error != "")
        {

            cellProperties.hasError = true;

            cellProperties.errorMessage = error;

            td.style.color = "red"
            entry['isValid'] = false // si le champ est invalide, la ligne entière l'est
        } else
        {

            cellProperties.hasError = false;

            cellProperties.errorMessage = '';

            td.style.color = "black"

[ferdinan...@gmail.com]

Ok. The interesting thing you're telling me is that I can add a custom attributes to cellProperties (as a newbie in javascript, I had not thought about that...)

(in the meantime, I stored my error message in the data model between special characters, and customized the editor, but your method seems better)

Thx so much!

[trebuchetty]

Don't hold me to that though, as I haven't personally tried it, but it seemed like it would work. I figure that's how they added the new comment feature, but that's just an assumption.

If that doesn't pan out, you could add a data attribute (data-error) to the td. Or even add the error message as a property to the underlying data object, then check that property on render ( table.getDataAtRow(row).errorMessage).

Lot's of options.