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.

I'm not familiar with this plugin but the documentation only shows beforeGetCellMeta and afterGetCellMeta ; where does the getCellMeta come from? — Kent Shikama, Dec 25 '17 at 04:35
[link](https://image.prntscr.com/image/pSN__mN-RpCONgy_320krA.png) @kshikama — Hüseyin ASLIM, Dec 25 '17 at 05:14

Hugues M. · Accepted Answer · 2018-03-15T18:02:10.627

4

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.

edited Mar 15 '18 at 18:02

answered Jan 02 '18 at 11:00

Hugues M.

17,453
5
27
56

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]);` – user270576 Mar 14 '18 at 20:02
Ah yes, that's what I did in the complete example, but I left `this` in the one-liner. Will edit, thanks. – Hugues M. Mar 14 '18 at 20:21
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. – user270576 Mar 15 '18 at 14:01
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 :) – Hugues M. Mar 15 '18 at 18:04

How to use getCellMeta in afterChange at Handsontable?

1 Answers1