How do I reference an already created handson table to alter it?

Question

I'm making a screen with 1 to n hansontables added dinamically depending of other entities in database. Each table will have save , x (remove lines) and + (add lines) buttons.

I succesfully created various tables, like in the handsontable examples with global variables like:

var hot;

$(document).ready(function () {

  var container = document.getElementById('basic_example');
  hot = new Handsontable(container, config);
}

Then in other methods I can alter the table like:

function addRow() {
    hot.alter("insert_row");
}   

But, as long as my number of tables is not fixed I need to create the tables and after reference the objects and modify them.

But all handsontable documentation (12 ) is based on creating a table with hot = new Handsontable(container, config); and after referencing this variable ie hot.getData()

So, my question is which is the correct way to reference an already created handson table??

I've tried several things:

• Using JQuery like

   $('idOfTheTable')

  or

  var hot = new Handsontable(document.getElementById('idOfTheTable')); hot.alter('insert_row', 10);

• Creating a DOM function $$ like:

   var $$ = function(id) { return document.getElementById(id); }; $$(idOfTheTable);

• Check here a fiddle with my last try:

   var $container = $("#" + tableName); var handsontable = $container.data('handsontable'); handsontable.alter('insert_row');

Answer 1

Short answer, speaking with a friend he gave me the clue to solve it. I used same technique I use to keep google markers and reference the tooltips. Keep references into an array .

---

OWN LONG ANSWER

Actually I cannot reference via JQuery even following the JQuery guide of Handsontable documentation. But as long as the reference exists in some moment, I can keep this reference in an array declared as global variable.

tables = [];

Each time I call method that creates a table I push the table reference into the array to mantain it alive.

var hot = new Handsontable(container, options);
tables.push(hot);

Done this, how do I know which table I must call? Simple, the HTML code is also created dynamically by a <c:forEach items="${list}" var="item"> I just create a counter that is incremented in each iteration. I just create table witch id="table_{counter}" and get position with

var tablePosition = parseInt(tableName.split("_")[1]);

---

HOT TEAM LONG ANSWER

First of all: many thanks Aleksandra and Handsontable team for the fast, great and quick support .

The key is used to better track your instances and you can choose to write it down with an object that will easily let you manage Handsontable instances.

Find here the fiddle demo.

Important parts, define a HotRegisterer that will keep track of created tables:

var HotRegisterer = {
    bucket: {},
    register: function(key, container, options) {
        var hot = new Handsontable(container, options);
        
        if (typeof key === 'string') {
            this.bucket[key] = hot;    
        } else if (typeof key === 'object') {
            key['__hot'] = hot;
        }
    },
    getInstance: function(key) {
        var hot;
        
        if (typeof key === 'string') {
            hot = this.bucket[key];    
        } else if (typeof key === 'object') {
            hot = key['__hot'];
        }
        
        return hot;
    }
};

Then, having this object, you create tables like:

var container = document.getElementById('example1');
  
HotRegisterer.register('myhot', container, {
    data: getCarData(),
    colHeaders: true
});

And you alter tables like:

HotRegisterer.getInstance('myhot').getSourceDataAtCol(0);

Far away more elegant and clean than my sollution.

Answer 2

You can provide similar solution with minimum code as follows:

//References to handsontable objects on Tab. Key=TabId, Value=Reference to Variable
var tabHandsOnTable = {};

To display data in handsontable inside container in a Tab (variable liTabId is current TabId) following is the code:

    //Displaying Cuboid in HandsonTable
  var container = document.getElementById(divCuboidWB);
  var hot = new Handsontable(container, {
    data: lidata.liarray,
    colHeaders : liHdr.liHdrArray,
    renderAllRows: true,
    rowHeaders: true,
    minSpareRows: 1,
  });
  //Saving reference of handsontable in global objects. key=liTabId
  tabHandsOnTable[liTabId] = hot;

Now you can access the handsontable from tabHandsOnTable{} using activeTabId which is tab id of current tab. Further the cell of handosontable is updated using setDateAtCell function as shown below:

//Render handsontable cell
function renderCell(rowid, colid, string_value, formula_string, cell_access)
{
  tabHandsOnTable[activeTabId].setDataAtCell(rowid, colid, string_value);
}

This is working example, and i can display multiple Tables in same browser window.