Change the class name of a cell in handsontable

Question

I want to change the class name of a "td" in a handsontable. So I use jquery to do that with "addClass". In my css file, I have a specified color with this class name.

My css :

 .error
 {
     background-color : red;
     color : blue;
 } 

And my jquery code is :

  <script type="text/javascript">
      $(document).ready(function(){
        $('#submit_button_essai').click(function(){
            var td;


            td=(hot.getCell(1,1));

            $(td).addClass("error");


            $.post("ajax_insert_essai.php",{arr:data_essai}, insert_essai_callback);



        });

    });

I don't know how I can assign the class name to only one cell ! Somemone can help me please ?

Answer 1

EASIEST WAY TO DO THIS

---

There is an easier way to accomplish this dynamically using Javascript. Even though this is a late answer, others will definitely appreciate it.

I wanted to add image thumbnails via jQuery Tooltip so i needed to add a title to the row, but you can follow my same logic to add any attribute. If you just want to do the cells then add another level and use 'td'. I am also adding a class here for your pleasure.

var count = 0;
while(arr_length > count)
{
    var tmp_count = count + 1;//did this because i have a Handsontable header defined and the first index of tr is the header, if you have one
    if(main_drawing_jpg[count] == "/FOLDER_1/image_not_available.jpg")
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='/FOLDER_1/thumb_image_not_available.jpg' />";
    }else
    {
        spreadsheet.getElementsByTagName("tr")[tmp_count].title = "<img src='" + main_drawing_jpg[count] + "_thumb.jpg' />";
    }
    var tmp_class_name = "row_" + tmp_count + "_class";
    spreadsheet.getElementsByTagName("tr")[tmp_count].setAttribute(class, tmp_class_name);
    count++;
}

---

Here is the code for the jQuery Tooltip if interested...

$(function()
{
    $(document).tooltip(
    {
        //track: true,
        position: { my: "left+10 center", at: "right center" },
        content: function ()
        {
            return $(this).prop('title');
        }
    });
});

---

Answer 2

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

You want to use a customRenderer option of your cells attribute. It will apply the renderer to all your matching cells and do some fun stuff inside the renderer. Here is how:

Start by defining the 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 see, this will apply the class to every td that you give this renderer to. Now it's just a matter of giving it to the right cells. You do that by adding the cells attribute:

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 end up doing is defining the renderer on whichever cell you want. Now of course this will just add it on render and not dynamically. For that you can use a second method similar to this.

Your click event could do two things:

1) recalculate the cells option and update them

This one is easy and follows the example from above. You would want to modify cells to apply the renderer to whichever cells you want to add the class name to. After that, you just do:

hot.updateSettings({cells: newCellObject});

And that's it.

A second, more interesting option, is to define the custom renderer on EVERY cell. If you do this, then you want to add the logic of which cells to add the class name to inside this renderer function; this is possible because the renderer takes as inputs the row and column positions 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 that's it! Every time you want to add a cell to have the class name added to, push the cell coordinates to that global array and handsontable will automatically render it correctly next time you render. Something like this:

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

And same goes for removing the class name, just search for the cell to remove and get rid of it from the globalErrorCells array.

I hope that made sense! One last comment. If you're trying to do validation, I would recommend reading the section on validators on the Handsontable page. You can do a similar thing with the cells option to pass in a validator function. This gets applied on render to all your cells and if it fails the validation, it automatically adds a class to that cell which you can then use CSS to change :D

Answer 3

You can try looking into Handsontable.Dom.addClass function. It takes an element and classname as arguments. Check out the source code for handsontable where it is used in a lot of places.