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.

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.