Accessing a TD attribute from afterChange

Getting help Questions
1

When I’m population the table, I’m adding an attribute to a TD to store the original value of the cell. Every time a cell value is changed, I use afterChange to check if the new value is different than the original one and I want to add an input hidden as a child of that TD so I can send to save only real new values.

How can I access that TD from inside the afterChange? I tried using getCellMeta but it is not it.
Thank you!

var statusTableSettings = {
data: allFarmsStatus,
columns: columnsSettings,
width: ‘100%’,
height: tableHeight,
rowHeaders: true,
colHeaders: columnHeaderNames,
customBorders: true,

  cells: function (row, col) {
    var cellProperties = {};
    var data = this.instance.getData();
    for(var i=0; i< statusCodeOptions.length; i++){
      if (data[row][col] === statusCodeOptions[i]) {
        cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
          Handsontable.renderers.TextRenderer.apply(this, arguments);
          td.style.backgroundColor = statusColorOptions[i];
          **td.original = data[row][col];**
        };
        return cellProperties;
      }
    }
  },
       afterChange: function (changes, source) {
    if (!changes) {
      return;
    }
    $.each(changes, function (index, element) {
      var row = element[0];
      var col = element[1];
      var oldValue = element[2];
      var newValue = element[3];
   
      **var theTD = statusTable.getCellMeta(row, col);**

      if (theTD.originalValue === newValue){
           **theTD.innerHTML = '<input type=hidden value='what I need to save'>';**
      }

}

2

Hey @aserrao

have you tried the getCell method?

Here’s an example of use https://jsfiddle.net/handsoncode/pxn28L9o/

3

Yes! For some reason I missed that function…

The firs part worked fine and I was able to set an attribute to a td. For the second part, I need to add an input hidden as a child of that td. On your fiddle, I’m trying with appendChild but it gives me an error. How can I do that?

Thank you!

hot.addHook(‘afterChange’, function(changes){
var row = changes[0][0];
var col = changes[0][0];
var cell = hot.getCell(row, col);
cell.appendChild("");
console.log(cell)
})
cell.appendChild("");

4

Should that input appear when you open the editor, should be visible when the editor is closed by the table is viewing?

A cell in Handsontable is defined by tree elements:

  • editor
  • renderer
  • validator

each of these has its own function. Validator works underneath the viisible part of the table. It allows you to process and validate the data that is entered via editor. Editor, can block or alter the way user add the data. The renderer uses the data provided in he editor and shows if the data has been validated.

5

The input is a hidden one, just to be send in a post form with the data to be saved.
So, this input shouldn’t be seen by the editor or validated but should remain within the table after ‘afterChange’ finish his part (based on what you just said, after the cell was rendered). Is there a way to keep this input as a TD child?

6

After more intense debugging, I noticed that the table is reloaded and the input hidden that I had successfully added is now gone! I went another direction to add the inputs under a specific div (not inside the table) and search through that list of inputs if there is a need to update one of them…Not ideal but works. It would be a great functionality to add to the Handsontable - get a list of cells that were modified!

7

Hey @aserrao

from what you are saying I understand that you do not need to render the input, nor allow to alter while editing. So it brings a question - why you need to attach it to the Handsontable? afterChange hook can pass some logic to an external element as well and it won’t affect with the rerendering of the table or slow down its performance.