HandsOnTable cell value changes when renderer is used

Question

When I use a function to change the background of a HandsOnTable cell, the value rendered in the cell changes to 1 decimal place. I thought this was because I was inadvertently removing the format string, but that appears to be incorrect.

This is the renderer, cell function and column definition:

function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    if (value !== instance.getData()[row][2])
        td.style.background = 'yellow';
}
Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

function cells(row, col, prop) {
    if (col === 1)
        return { format: '0.00', renderer: negativeValueRenderer }
    else
        return { format: '0.00', }
}

var colDefs = [
    {
        dateFormat: 'DD/MM/YYYY HH:mm',
        correctFormat: true,
        width: 150,
        editor: false,
        disableVisualSelection: true,
        readOnly: true,
    }, {
        type: 'numeric',
        format: '0.00',
        width: 75
    }, {
        type: 'numeric',
        format: '0.00',
        width: 75,
        editor: false,
        readOnly: true,
    }
];

How can I ensure that cells which have, eg, 1254.23 retain the two decimal places - in my table the third column is rendered with 2 decimal places but the second is with only 1 place.

Lovera Lovera · Accepted Answer · 2017-03-27T15:04:10

I had a similar problem. At same page I have two handsontables, and I needed to color the active row on both. So I follow the example from link https://docs.handsontable.com/0.31.1/demo-conditional-formatting.html

Which has the line:

Handsontable.renderers.TextRenderer.apply(this, arguments);

And that line brings me a lot of problems with rows that has checkbox, numbers, dropdowns and so on. I may be mistaken but as far I could understand they transform anything to text. I solved my problem by a track on issue https://github.com/handsontable/handsontable/issues/732

As you could see all cells has your own type, and by the type has to be applied a different type of renderer.

        case 'text':
            Handsontable.TextCell.renderer.apply(this, arguments);
            break;
        case 'autocomplete':
            Handsontable.AutocompleteCell.renderer.apply(this, arguments);
            break;
        case 'checkbox':
            Handsontable.CheckboxCell.renderer.apply(this, arguments);
            break;
        case 'numeric':
            Handsontable.NumericCell.renderer.apply(this, arguments);
            break;
        case 'date':
            Handsontable.DateCell.renderer.apply(this, arguments);
            break;
        case 'handsontable':
            Handsontable.HandsontableCell.renderer.apply(this, arguments);
            break;
        default:
            Handsontable.TextCell.renderer.apply(this, arguments);
            break;

From your colDefs you will get the type of column-cell.

Hope that it helps you.

Good lucky

HandsOnTable cell value changes when renderer is used

1 Answers