Change class name in mobile

There's a very easy way to do this as Handsontable was built with this use case in mind!

You want to use a parameter of customRenderer

your attribute cells

. It will apply the renderer to all of your respective cells and do some fun stuff inside the renderer. Here's how:

Start by defining a renderer:

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // get the jquery selector for the td or add the class name using native JS
    $(td).addClass("error");

    return td;
}

      

        
        
        
      

    

As you can see this will apply the class to everyone td

you give this renderer to. Now it's just a matter of giving back to the right cells. You do this by adding an attribute cells

:

var hot = new Handsontable(container, {
    data: data,
    cells: function(row, col, prop) {
        var cellProperties = {};

        if (row === 0, col === 0) {
            cellProperties.renderer = customRender; // uses function directly
        }
    }
});

      

        
        
        
      

    

What you are doing is defining the renderer on whatever cell you want. Now, of course, this will just add it to the render, not dynamically. For this, you can use a second method like this.

Your event click

can do two things:

1) recalculate the parameter cells

and update them

It's easy and follows the lead from above. You want to change cells

to apply the renderer to those cells where you want to add the class name. After that, you just do:

hot.updateSettings({cells: newCellObject});

      

        
        
        
      

    

What is it.

The second, more interesting option is to define custom rendering in the EVERY cell. If you do, you want to add logic for which cells to add the class name inside that render function; this is possible because rendering takes row and column positions as input, so you can do the following:

// to do a fast search, use this hack to turn the array into strings
var globalErrorCells = [[1,2]+'', [0,0]+'']; 

function customRender(instance, td, row, col, prop, value, cellProperties) {
    // change to the type of renderer you need; eg. if this is supposed
    // to be a checkbox, use CheckboxRenderer instead of TextRenderer
    Handsontable.renderers.TextRenderer.apply(this, arguments);

    // we check if this cell is in our global array of cells to include
    if (globalErrorCells.indexOf([row, col] + '')) {
        // get the jquery selector for the td or add the class name using native JS
        $(td).addClass("error");
    }

    return td;
}

      

        
        
        
      

    

And this! Every time you want to add a cell to add a class name, click the coordinates of the cell on this global array, and it will automatically display it the next time it is rendered. Something like that:

// assume we're inside the click
var cell = [1,2]+''
globalErrorCells.push(cell);
hot.render();

      

        
        
        
      

    

And as for removing the class name, just find the cell to remove and get rid of it from the array globalErrorCells

.

Hope this made sense! Last comment. If you are trying to do validation, I would recommend reading the section on validators on the Handsontable page. You can do a similar thing with an option cells

to pass a validator function. This applies to render to all your cells, and if it fails validation, it automatically adds a class to that cell, which can then be used to change the CSS: D