Set renderer and format in cellProperties

[kapocris]

Hello, apparently is not possible to set a custom format and render function at the same time. Please, have a look at my code:

Format works but the renderer function is never called.

cells: function (r, c, prop) {
                //Here we can change every single cell's properties.
                var cellProperties = {}
                cellProperties = {
                    readOnly: _viewModel.readOnly,                    
                    type: 'numeric', 
                    renderer: typeof (changesObj['row' + r]) != 'undefined' && typeof (changesObj['row' + r]['col' + prop]) != 'undefined' ?
                            editableUpdatedCellRenderer : editableCellRenderer
                    ,
                    format: _viewModel.inputMode == Forecasts.InputModes[0] ? '0' : '0.00'
                }
                return cellProperties
            },

Thanks

[setthase]

How you editableUpdatedCellRenderer and editableCellRenreder looks like? Probably you write it wrong - try add Handsontable.NumericCell.renderer.apply(this, arguments) at the bottom of yours renderer's.

[kapocris]

They look exactly like this:

var editableCellRenderer = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.TextCell.renderer.apply(this, arguments);
    $(td).addClass(cellProperties.cellClass)
    td.innerHTML = '<div class="editableCellInnerDiv">' + td.innerHTML + '</div>';
    return td;
};

var editableUpdatedCellRenderer = function (instance, td, row, col, prop, value, cellProperties) {
    Handsontable.TextCell.renderer.apply(this, arguments);
    $(td).addClass(cellProperties.cellClass)
    td.innerHTML = '<div class="editableUpdatedCellInnerDiv">' + td.innerHTML + '</div>';
    return td;
};

They are not being called at all.

If I leave the code like this:

cells: function (r, c, prop) {
                //Here we can change every single cell's properties.
                var cellProperties = {}                
                cellProperties = {
                    readOnly: _viewModel.readOnly,                    
                    type: {
                       renderer: typeof (changesObj['row' + r]) != 'undefined' && typeof (changesObj['row' + r]['col' + prop]) != 'undefined' ?
                        editableUpdatedCellRenderer : editableCellRenderer},

                }                
                return cellProperties
            },

it works but of course, no formatting.

[setthase]

Then fix it in these way:

cells: function (r, c, prop) {
                //Here we can change every single cell's properties.
                var cellProperties = {}                
                cellProperties = {
                    readOnly: _viewModel.readOnly,   
                    format: _viewModel.inputMode == Forecasts.InputModes[0] ? '0' : '0.00',
                    type: {
                       renderer: typeof (changesObj['row' + r]) != 'undefined' && typeof (changesObj['row' + r]['col' + prop]) != 'undefined' ?
                        editableUpdatedCellRenderer : editableCellRenderer},

                }                
                return cellProperties
            },

[kapocris]

That works! . So the order was wrong?

Thank you very much for you help! very quick response. :)

[setthase]

Not order. You call rendered in wrong place in first code. You set type to 'numeric' and renderer to some other properties, but renderer must be inside type (must be a child of type) not a sibling.

[warpech]

You can also say that the order was wrong - yes.

Basically type means a collection of cell renderer and editor. So it will overwrite any renderer defined before it. But I think it is misleading behavior, I hate when it happens to me when I use other libraries :) So I will mark it as a low priority bug.

[setthase]

I set priority to high, because this notation:

{
    type: 'some_type',
    renderer: someRenderer
}

doesn't work as desired. There is an error in code that doesn't apply order of these settings.

[warpech]

The above issue is now solved in HOT 0.9.3. This will now work as desired:

{
    type: 'some_type',
    renderer: someRenderer
}

[davekos]

I am looking for an example to set a row to the type 'DATE'. Most examples set the column to a specific type but I am working with Row Headers and Rows of data.

Would this above discussion be a good example or is there another better example out there?

[BOZii]

Implemented the above solution for changing formatting dynamically, in my case, after a ddl type is selected it changes the adjacent cell to proper format (ie. "Number" -> 0.00 , "Money" -> $0.00). My problem is that that it changes the formatting for the entire column, is there a way to change the format of just a single cell? without setting a custom renderer that checks the value and changes it based on regex. Thanks