cells function on handsontable

Question

this is my first question here, I decided to write because I'm going crazy with this.

I'm working with jQuery handsontable and I'm trying to set colour of specific column. The problem with this is that this column never has the same index, because the data it's loaded from database. Well I think I can do it with cells function when I initialize handsontable.

cells: function (row, col, prop) {
        var cellProperties = {};
        if (prop==="matsvalue") {
            cellProperties.renderer = totalesRenderer; // uses function directly
        }
        return cellProperties;
    }

The question is. If I have a column defined with data: "matsvalue". Can I reference this with prop parameter?

Renderer it's working if I do this,

cells: function (row, col, prop) {
        var cellProperties = {};
        if (row===5) {
            cellProperties.renderer = totalesRenderer; // uses function directly
        }
        return cellProperties;
    }

row number 5 takes renderer

I get the columns from database saving it in a JS Object and pushing it to handsontable columns like this.

var col2 = new Object();
            col2.data = "matsvalue";
            col2.title = "Mats Value";
            col2.width = "200";
            col2.readOnly = "true";
            col2.renderer = totalesRenderer;

it takes data, and title, but width readonly and renderer option is not working.

Answer 1

Look at the documentation because you almost have it. Instead of cells, you should be using columns because you seem to want to add color to the entire column. In that case, you can give each column a renderer so you check only once upon creation of this columns object.

Here is an example of what I think you want happen. Notice that it applies the green renderer to wherever the column with header "matsvalue" appears. So even if it were rendered in another position, it always sets the green renderer to the column with header "matsvalue".

Answer 2

Well I do it finally.

first I have to create the renderer. The only thing that it do is to add "totales" class to the "td" element where the renderer is applied.

function totalesRenderer(instance, td, row, col, prop, value, cellProperties) {
    Handsontable.renderers.TextRenderer.apply(this, arguments);
    $(td).addClass('totales');
}

Next step. I have a function were all the handsontable data is loaded via Ajax, and this function is called when the page is ready. It's too long to paste here. Well at the end of this function I write this.

$("#handsontable").handsontable('updateSettings', {
            cells: function (row, col, prop) {
                var cellProperties = {};

                if (prop === 'suma' || prop === 'valoruni' || prop === 'totalptos' || prop === 'totalmilipuntos' || prop === 'valormatuni') {
                    cellProperties.readOnly = true;
                    cellProperties.renderer = totalesRenderer;
                }

                return cellProperties;
            }
        });

You can see that I'm calling the "updateSettings" method. Into this I search in all the cells of my table looking for the columns that I need, "suma" "valoruni" "totalptos" "totalmilipuntos" and "valormatuni". When I find them I apply the renderer and make them readOnly cells.

It's important to do it like this because if you do it in the handsontable options declaration, the data that we are getting with Ajax it's not loaded in our table and NEVER will find the columns with "suma" "valoruni" "totalptos" "totalmilipuntos" and "valormatuni" prop.

I wish this can help anyone who reads it.