How can I change the color of a changed cell in Handsontable?

Question

I am using the Handsontable plugin and when the user changes the values in the cell, it should turn yellow so they can keep track of what has been changed. In this case, yellow is class .changeInput. The tricky part is when you double click the cell to change it, this becomes a textarea and no longer a td. Any ideas? Thanks in advance.

http://jsfiddle.net/PAH5J/

jQuery

$("textarea.handsontableInput").change(function (){ 
    //$(this).find(td).addClass('changeInput');
    $('.htNumeric .current').addClass('changeInput');
});

you need to use event delegation and maybe "keyup" instead of change [http://jsfiddle.net/PAH5J/4/](http://jsfiddle.net/PAH5J/4/) — Abraham Uribe, Oct 21 '13 at 17:45
@AbrahamUribe I need the changed td to stay yellow Also, this only seems to be affecting the textarea. — triplethreat77, Oct 21 '13 at 18:01
only work for the last edited cell [http://jsfiddle.net/PAH5J/6/](http://jsfiddle.net/PAH5J/6/) — Abraham Uribe, Oct 21 '13 at 18:35
@AbrahamUribe, I want all cells edited to stay yellow, is this possible? — triplethreat77, Oct 21 '13 at 18:38
like this [http://jsfiddle.net/PAH5J/8/](http://jsfiddle.net/PAH5J/8/)? — Abraham Uribe, Oct 21 '13 at 20:22
This code (https://stackoverflow.com/a/64518567/11974969) is a Shiny app in R that does not use jquery but share the same goal of changing the background color of a Handsontable cell after it's been edited by a user. — Tony Peng, Oct 25 '20 at 00:36

Abraham Uribe · Accepted Answer · 2014-05-28T21:59:37.507

to mark every cell that have change you can create a custom renderer and apply only if data("change") exists like this

//Custom renderer add class if the element have the data "change"
var myRenderer = function (instance, td, row, col, prop, value, cellProperties) {
  Handsontable.TextCell.renderer.apply(this, arguments);
  if($(td).data("change")){
      $(td).addClass('changeInput');
  }
};     
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
  cells: function (row, col, prop) {//set the new renderer for every cell
    return {type: {renderer: myRenderer}};
  }
});
//afterChange get every cell and add class and data
$('#example').handsontable('getInstance').addHook('afterChange', function(changes) {
  var ele=this;
  $.each(changes, function (index, element) {
            $(ele.getCell(element[0],element[1])).addClass('changeInput').data("change",true);
});

$("#example").on("keyup","textarea.handsontableInput",function (){
$(this).addClass('changeInput');
}).on("blur","textarea.handsontableInput",function (){
$(this).removeClass('changeInput');
});

http://jsfiddle.net/PAH5J/8/
EDIT
to move the highlighted area you can use the cellProperties instead of .data() like this

var myRenderer = function (instance, td, row, col, prop, value, cellProperties) {
     Handsontable.TextCell.renderer.apply(this, arguments);
     if (cellProperties.change) {//check for new property change in the cell
         $(td).addClass('changeInput'); //add the changeInput class to the actual td
     }
};    
$('#example1').handsontable('getInstance').addHook('afterChange', function(changes) {
    var ele=this;
    $.each(changes, function (index, element) {
         //add the changeInput class to the actual td
         $(ele.getCell(element[0],ele.propToCol(element[1]))).addClass('changeInput')
         //get the cell properties and create a new one "change"     
         //to check in the renderer
         ele.getCellMeta(element[0],ele.propToCol(element[1])).change=true;
    });    
});

I made a mistake and didn't give a full example of what I'm working with. Rather than just data: data, I'm grabbing data from a function...function getCarData() http://jsfiddle.net/D4Kx3/ and can't get this working — triplethreat77, Oct 21 '13 at 21:08
[http://jsfiddle.net/D4Kx3/1/](http://jsfiddle.net/D4Kx3/1/) but you shouldn't have two columns with the same name "price" — Abraham Uribe, Oct 21 '13 at 21:44
Working nicely, thank you. One last thing, my checkboxes are no longer being read correctly. They appear as false. http://jsfiddle.net/D4Kx3/2/ — triplethreat77, Oct 22 '13 at 14:16
In the final solution, when we scroll the table, the highlighted area doesn't move ( when change is made in a non fixed row ). What I did was keep a track of the changed cells by adding them in the afterChange function and in the renderer, just checked if the cell of that row and col is present in the tracked cells. Thanks for the solution though. — Aditya Pawade, May 28 '14 at 20:13
to fix that bug on scroll you can use the cellProperties in the renderer [http://jsfiddle.net/D4Kx3/31/](http://jsfiddle.net/D4Kx3/31/) — Abraham Uribe, May 28 '14 at 21:49

How can I change the color of a changed cell in Handsontable?

1 Answers1

Linked