Custome renderer for cells

General discussions Miscellaneous
1

In a simple project I like to use different types (numeric + dropdown) and some styling in the same instance.
In the Hot creator I’am using this snippet:

cells: function (row, col, prop) {
                this.renderer = function (instance, td, row, col, prop, value, cellProperties) {
                    Handsontable.renderers.TextRenderer.apply(this, arguments);
                    if (instance.getDataAtRowProp(row, 'knart') == 'R') {
                        td.style.background = '#555';
                        td.style.color = 'white';
                    };
                }
            }

This works as aspected, but the type rendering (numeric,dropdown) disappears. It seems my code overwrite the standard behaviour. If I delete the ‘cells’-code, the the type renderers comes back.

2

Hi @Knoeterich

Within this renderer, you use TextRenderer so all the cells are inheriting that renderer for the presentation layer (they may, however, have still a validator attached).

ps. you do not need to use a renderer to set up styling. You can set up a className and add styling within CSS part. Here’s a demo that can help http://jsfiddle.net/handsoncode/q7L6xrks/

3

Thanx. With this code below I solved my issue:

 cells: function() {
                this.renderer = function (instance, td, row, col, prop, value, cellProperties) {
                    switch (cellProperties.type) {
                        case 'numeric':
                            Handsontable.renderers.NumericRenderer.apply(this, arguments);
                            break;
                        case 'dropdown':
                            Handsontable.renderers.DropdownRenderer.apply(this, arguments);
                            break;
                        default: 
                            Handsontable.renderers.TextRenderer.apply(this, arguments);
                    }

                    if (instance.getDataAtRowProp(row, 'knart') == 'R') {
                        td.style.fontStyle = 'italic';
                        td.style.background = '#555';
                        td.style.color = 'white';
                    };
                }
            }
1 Like