How to set properties for specific cells with handsontable in jQuery?

Question

I'm working on some stuff with handsontable and I want to create a function to really add soem formatting. Specifically, I'd like to have options to change background coloring and font attributes.

I've been able to get into the context menu to add a button, as well as getting the coordinates for the selected cell, but I can't find the way to set formatting options other then on the init call for handsontable.

This is the documentation I've been looking at, https://github.com/warpech/jquery-handsontable/wiki/Options#cell-options and I'm hoping there's some more elsewhere.

I don't have code to provide since this is a project that's locked up, but I'm really looking at how I can set formatting options for an individual cell that isn't on init.

Answer 1

This took a little digging through the documentation, but I did find it...

This example will give red font to all of the selected cells.

callback: function (key, options) {
    var cell = $("#dataBlock'. $val['id'] .'").handsontable(\'getSelected\');
    var startRow = cell[0];
    var startCol = cell[1];
    var endRow = cell[2];
    var endCol = cell[3];

    if (key === "redFont") {
        setTimeout(function () {
            curRow = startRow;
            curCol = startCol;
            while(curRow <= endRow){
                curCol = startCol;
                while(curCol <= endCol){
                    check = $("#dataBlock'. $val['id'] .'").handsontable("getCell", curRow, curCol);
                    check.style.color = "red";
                    curCol += 1;
                }
                curRow += 1;
            }
        }, 100);
    }
}

Answer 2

If you use jQuery, you can use the standard addClass/removeClass functions.

I have a page global Handsontable instance I call "hot". Given the rowNum and the colNum:

        var cell = hot.getCell(rowNum,colNum);
        $(cell).addClass('yellow');

Answer 3

Define the renderer function

function valueRenderer(instance, td, row, col, prop, value, cell) {
    if (row === 0 && col === 1) {
        $(td).css('color', 'green');
    }

    if (col > 3) {
        $(td).addClass('custom');
    }

    if (col === 5) {
        cellProperties.readOnly = true;
    }

    if (col > 3 && col < 10) {
        cellProperties.type = 'numeric';
    }
    ....
    ....
    so on...
}

and then in handsontable cells option

 cells: function (row, col, prop) {
                var cellProperties = {};
                cellProperties.renderer = valueRenderer;
                return cellProperties;
        }

This way you can change properties, apply classes, change colors on the fly etc.

Answer 4

I tried jomofrodo's solution, which didn't work for me trying to change the background color using a class - but it did inspire something that did work:

var cell = handsOnTable_Conditions.getCell(x_coord,y_coord);
$(cell).css('background-color','red');

However, changing class directly could have advantages of flexibility over this solution of changing the style directly.