Search code examples
javascriptcssnumerichandsontable

Handsontable - can't set thousand separator for custom cell


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.


Solution

  • 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!