How to use getCellMeta in afterChange at Handsontable?

Question

I'm using handsontable js plugin. I want to use getCellMeta function in afterChange hook but not working. I when use function out afterChange hook, function is working. But not working in afterChange hook.

var container = document.getElementById('t1'),
  options = document.querySelectorAll('.options input'),
  table,
  hot; 

hot = new Handsontable(container, {    
  autoWrapRow: true,
  startRows: 81,
  startCols: 206,
  autoColumnSize : true,  
  stretchH: 'all', 
  afterChange : function(change,source) { 
      if (source === 'loadData') {
        return;
      }   
      var test = this.getCellMeta(change[0],change[1]); // not working, not return "id" meta
      console.log(test);  
  }
});

$.ajax({
  url: 'path',
  type: 'GET',
  dataType: 'json',
  success: function (res) { 
    var data = [], row, pc = 0; 
    for (var i = 0, ilen =  hot.countRows(); i < ilen; i++)
    {
      row = []; 
      for (var ii = 0; ii<hot.countCols(); ii++)
      {   
        hot.setCellMeta(i,ii,'id',res[pc].id);
        row[ii] =   res[pc].price;
        if(pc < (res.length-1)) {

        pc++;
        }
      } 
      data[i] = row;
    }  
    hot.loadData(data);
  }
}); 

var test = this.getCellMeta(0,0); // is working, return "id" meta
console.log(test);  

Output console log i tried out afterChange;

Output console log use in afterChange;

How to get cell meta after change?

Thanks.

Bed

I'm not familiar with this plugin but the documentation only shows beforeGetCellMeta and afterGetCellMeta ; where does the getCellMeta come from? – Variety

link @kshikama – Extrajudicial

Answer 1

You're almost there, there's just a small mistake in your callback: the doc for afterChange specifies that first argument (changes) of the callback is:

a 2D array containing information about each of the edited cells [[row, prop, oldVal, newVal], ...].

So, 2 important details:

• To get the "meta" of row/col of affected cell (assuming there is just one), you need to call hot.getCellMeta(change[0][0],change[0][1]) for example
• On hot and not this because the afterChange callback function is invoked from a different context (ie on a different object), so this is not the right target for the call, see How does the "this" keyword work?

Example that reads the whole array of changes:

var hot = new Handsontable(container, {
  /* rest of init... */
  afterChange : function(changes,source) {
      console.log("Changes:", changes, source);
      if (changes) {
          changes.forEach(function(change) {
              var test = hot.getCellMeta(change[0],change[1]);
              console.log(test.id, test); // 'id' is the property you've added earlier with setMeta         
          });
      }
  }
});

See demo fiddle, open JS console, make any change(s) in the table.

Waterless

Also, can't really call this.getCellMeta(change[0][0],change[0][1]) because of context change. Need to reference hansontable object by name: hot.getCellMeta(change[0],change[1]); – Suds

Ah yes, that's what I did in the complete example, but I left this in the one-liner. Will edit, thanks. – Waterless

Perhaps, add a note about the context change to your answer as well, because this is something that gets everyone: people assume that this inside their Handsontable(...) definition refers to handsontable object, but it doesn't, since Handsontable switches context on you for the afterChange call. – Suds

Better now? I was not planning on grooming this answer too much, as it was only resolving a simple mistake (and, yes, a known problem with this that already has an answer, so I linked to it). Feel free to edit :) – Waterless