I am using the handsontables Meteorjs package, tables are inserted into a div onRendered. I want to use the same template multiple time depending on how many names are enters previously.
I created dynamic name on the the tables div like so
<template name="Dividends">
<div id="dividends{{tName}}" class="table-container table-group"></div>
<div id="payments{{tName}}" class="table-container"></div>
</template>
the tName returns the template name that is passed in creation.
{{>Dividends tName="dividends"}}
<hr>
<h5>Corporation Tax</h5>
{{>Dividends tName="corpTax"}}
My issue is in js
Template.Dividends.onCreated(function() {
var self = this;
self.autorun(() => {
self.subscribe('dividendsData');
self.subscribe('dividendsPayments');
});
});
Template.Dividends.onRendered(function() {
var tempData = Session.get('data');
var div_data = [];
var pay_data = [];
var div_container = document.getElementById('dividends');
var pay_container = document.getElementById('payments');
console.log(this.data.tName)
var div_table = new Handsontable(div_container, {
data: div_data,
minSpareCols: 0,
minSpareRows: 0,
minCols: 1,
rowHeaderWidth: 210,
maxCols: 1,
minRows: 2,
maxRows: 2,
rowHeaders: ['Opening Dividends ', 'Rate'],
colHeaders: ['Opening'],
columns: [
{
data: 'opening',
}],
cells: function(row, col, prop, value) {
var cellProperties;
if(row == 0){
cellProperties = {
type: 'numeric',
format: '$0.00'
};
}else if(row == 1){
cellProperties = {
type: 'numeric',
format: '0.00%'
};
};
return cellProperties;
},
afterChange: function(change, source) { // "change" is an array of arrays.
if (source !== "loadData") { // Don't need to run this when data is loaded
for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
var rowNum = change[i][0]; // Which row it appears on Handsontable
var row = div_data[rowNum]; // Now we have the whole row of data, including _id
var key = change[i][1]; // Handsontable docs calls this "prop"
var oldVal = change[i][2];
var newVal = change[i][3];
Meteor.call('upsertDividendsData', tempData._id , rowNum, key, newVal);
}
}
},
});
var pay_table = new Handsontable(pay_container, {
data: pay_data,
minSpareCols: 0,
minSpareRows: 0,
rowHeaderWidth: 210,
minCols: 12,
maxCols: 12,
minRows: 2,
maxRows: 2,
rowHeaders: ['Payments - opening ', 'Payments - current'],
colHeaders: ['M1', 'M2', 'M3', 'M4', 'M5', 'M6', 'M7', 'M8', 'M9', 'M10', 'M11', 'M12'],
stretchH: 'all',
columns: [
{
data: 'M0',
type: 'numeric',
format: '0.00%'
}, {
data: 'M1',
type: 'numeric',
format: '0.00%'
}, {
data: 'M2',
type: 'numeric',
format: '0.00%'
}, {
data: 'M3',
type: 'numeric',
format: '0.00%'
}, {
data: 'M4',
type: 'numeric',
format: '0.00%'
}, {
data: 'M5',
type: 'numeric',
format: '0.00%'
}, {
data: 'M6',
type: 'numeric',
format: '0.00%'
}, {
data: 'M7',
type: 'numeric',
format: '0.00%'
}, {
data: 'M8',
type: 'numeric',
format: '0.00%'
}, {
data: 'M9',
type: 'numeric',
format: '0.00%'
}, {
data: 'M10',
type: 'numeric',
format: '0.00%'
}, {
data: 'M11',
type: 'numeric',
format: '0.00%'
}, ],
afterChange: function(change, source) { // "change" is an array of arrays.
if (source !== "loadData") { // Don't need to run this when data is loaded
for (i = 0; i < change.length; i++) { // For each change, get the change info and update the record
var rowNum = change[i][0]; // Which row it appears on Handsontable
var row = pay_data[rowNum]; // Now we have the whole row of data, including _id
var key = change[i][1]; // Handsontable docs calls this "prop"
var oldVal = change[i][2];
var newVal = change[i][3];
Meteor.call('upsertDividendsPayments', tempData._id , rowNum, key, newVal);
}
}
},
});
Tracker.autorun(function() { // Tracker function for reactivity
tempData = Session.get('data');
div_data = DividendsData.find({fileId: tempData._id}).fetch(); // Tie in our data
pay_data = DividendsPayments.find({fileId: tempData._id}).fetch();
div_table.loadData(div_data);
pay_table.loadData(pay_data);
});
});
Template.Dividends.helpers({
getID: function(){
return this.id;
}
});
As you can the issue is my table name like
var div_table
&
var div_table
I need these to be dynamic like the html id’s. I have tried a few things like id and so on but noting worked correct for me . Another thing i noticed is the onRendered function only seems to fired once.
If someone could please educate me and how to approach this would be great.