Handsontable - can't set thousand separator for custom cell

Question

I'm using Handsontable library for edit spreadsheet with financial data. I'm set custom numeral format, for using ' ' (space) as thousand separator.

numeral.language('ru', {
    delimiters: {
        thousands: ' ',
        decimal: ','
    },
    abbreviations: {
        thousand: 'k',
        million: 'm',
        billion: 'b',
        trillion: 't'
    },
    ordinal: function (number) {
        return number === 1 ? 'er' : 'ème';
    },
    currency: {
        symbol: '€'
    }
});

All works fine, but in some (with custom color and text-align) cells this settings not works. What is wrong?

Custom cell renderer for setting color and align:

function sumCellRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    td.style.background = '#FFFF88';
    td.style.textAlign = 'right';      
}

Working example at http://jsfiddle.net/m2dxws5a/7/

Custom cell in bottom marked with yellow color.

ZekeDroid ZekeDroid · Accepted Answer · 2015-06-29T15:51:55

When you apply a custom renderer, you overwrite the type of renderer so must set it yourself. If you look at your code, you are using TextRenderer and, as you can probably guess by now, this will render text. In Handsontable, numbers are type numeric and the renderer associated is NumericRenderer. So, solution:

Replace

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

With

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

It should work after that!

Handsontable - can't set thousand separator for custom cell

1 Answers