event that fires when handsontable loads

Question

I'm trying to do some DOM manipulations after handsontable finishes loading/initializing.

Does handsontable have some event that is triggered after it finishes building itself?

Answer 1

I can't find any such callback over at their github, and I don't think you really need one. Just do your DOM changes after you've invoked $("#container").handsontable(). If it's because you're loading it with ajax, just invoke it at completion. Just follow their example here.
_{if (source === 'loadData') {...}}

If you're up to the challenge though, and depending on what version you've downloaded, we can dive into the source code and make some adjustments ourselves, because it is fairly simple. I am assuming that you're asking for callback after the handsontable has finished initializing without any ajax loads.

Follow me, let's dive right in.

---

Changes in jquery.handsontable.full.js

Right, here it is, right after the settings, on line 2165 it says:

$.fn.handsontable = function (action) {...};

In there, we know everything is initialized, and luckily, the developer was nice enough to comment and label his stuff properly, so lets look at the lines inside it.

On line 2182 it says:

instance = new Handsontable.Core($this, currentSettings);

There's where they initialize the core things, at least that is what I can discern from the name, so adding a callback after this line should suffice as an afterInit callback.

So, all we need to do, is add a check for the callback in the settings provided by the user and then call it. I decided to add this callback after line 2184 because it's after the instantiation.
_{You can argue over where I put the callback and whether or not it should be inside the Core function and how I check if the setting is a function etc, but this gets the job done and it's easier this way.}

So, on line 2182

[...] 
instance = new Handsontable.Core($this, currentSettings); //<---- line 2182
$this.data("handsontable", instance);
instance.init(); //<---- line 2184

if(typeof(currentSettings.afterInit) == "function"){
    currentSettings.afterInit();
}
[...]

There, that's all we need to do! Now we can create a handsontable with an afterInit callback function.

$("#container").handsontable({
    startRows: 8,
    startCols: 6,
    rowHeaders: true,
    colHeaders: true,
    minSpareRows: 1,
    contextMenu: true,
    afterInit: function(){
        console.log("Handsontable initialized!");
    }
});

Don't be afraid to mess around with the source code, you'll learn a lot!

---

Complete altered code

Here's the complete altered code starting from line 2165 to 2203 containing the $.fn.handsontable function:

$.fn.handsontable = function (action) {
  var i, ilen, args, output = [], userSettings;
  if (typeof action !== 'string') { //init
    userSettings = action || {};
    return this.each(function () {
      var $this = $(this);
      if ($this.data("handsontable")) {
        instance = $this.data("handsontable");
        instance.updateSettings(userSettings);
      }
      else {
        var currentSettings = $.extend(true, {}, settings), instance;
        for (i in userSettings) {
          if (userSettings.hasOwnProperty(i)) {
            currentSettings[i] = userSettings[i];
          }
        }
        instance = new Handsontable.Core($this, currentSettings);
        $this.data("handsontable", instance);
        instance.init();
        if(typeof(currentSettings.afterInit) == "function"){
            currentSettings.afterInit();
        }
      }
    });
  }
  else {
    args = [];
    if (arguments.length > 1) {
      for (i = 1, ilen = arguments.length; i < ilen; i++) {
        args.push(arguments[i]);
      }
    }
    this.each(function () {
      output = $(this).data("handsontable")[action].apply(this, args);
    });
    return output;
  }
};