I am using Handsontable to show some table in my webpage and it is working fine, but over the time as the client left the page hanging the page will accumulate error such as
(I can't upload pic but the message is something like this)
387 handsontable.full.min.js:34 Uncaught TypeError: Cannot read property 'querySelector' of null
at t.overlayContainsElement (handsontable.full.min.js:34)
at n.value (handsontable.full.min.js:34)
at n.value (handsontable.full.min.js:40)
at n.value (handsontable.full.min.js:40)
at HTMLDivElement.<anonymous> (handsontable.full.min.js:40)
at HTMLDivElement.i (handsontable.full.min.js:34)
does it contribute to the page getting slower than initial?
here is the portion of the handsontable in my code
function table(data){
try {
document.getElementById('data_view').innerHTML = null;
const container = document.getElementById('data_view');
hot = new Handsontable(container, {
licenseKey: 'non-commercial-and-evaluation',
data: data,
//rowHeaders: true,
colHeaders:
['Area','WorkStation','Stepname','Commit','TechNode','Moves','WIP','Running','Hold','MTAS','Delta to Commit','Remarks','Delta to Commit'],
//editor: false,
columns: function(column) {
var columnMeta = {};
if (column === 0) {
columnMeta.data = 'AreaName';
} else if (column === 1) {
columnMeta.data = 'workstation';
} else if (column === 2) {
columnMeta.data = 'Stepname';
} else if (column === 3) {
columnMeta.data = 'Commit';
} else if (column === 4) {
columnMeta.data = 'TechNode';
} else if (column === 5) {
columnMeta.data = 'Moves';
} else if (column === 6) {
columnMeta.data = 'Wip';
} else if (column === 7) {
columnMeta.data = 'Running';
} else if (column === 8) {
columnMeta.data = 'Hold';
} else if (column === 9) {
columnMeta.data = 'MTAS';
} else if (column === 10) {
columnMeta.data = 'Delta to Commit';
} else if (column === 11) {
columnMeta.data = 'Remark';
columnMeta.readOnly = false;
}
return columnMeta;
},
readOnly: false,
overflow: 'hidden',
contextMenu: true,
afterSelection: function(r,c){
selection = this.getDataAtRow(r);
//localStorage.setItem("selection", selection);
//sessionStorage.setItem("selection2", selection);
//onsole.log(data)
},
contextMenu: {
items: {
'row_above': {},
'row_below': {},
'col_left': {},
'col_right': {},
'remove_row': {},
'remove_col': {},
'undo': {},
'redo': {},
'make_read_only': {},
'alignment': {},
'copy': {},
'export': {
name: 'Export to CSV',
callback: function(key, options) {
hot.getPlugin('exportFile').downloadFile('csv', {
columnHeaders: true,
overflow: 'hidden',
filename: 'Commit_Download_' + JSON.stringify(sqlrefresh[0].last_refresh)
})}
},
'lot_id_list': {
name: 'Check Lot',
callback: function() {
window.open("http://mfgrpa2:4000/lot_list?"+"Step="+selection[2].toString()+"Technode="+selection[4].toString(), "lot_list", "width=1500");
}
}
}},
dropdownMenu: true,
filters: true,
manualColumnResize: true,
manualRowResize: true,
columnSorting: true,
formulas: true,
minRows: 2,
minCols: 12,
minSpareRows: 1,
//maxCols: 3,
//colWidths: '100',
//height: 320,
//afterGetColHeader: addInput,
cells: function (row, col) {
var cellProperties = {};
const cellValue = this.instance.getDataAtCell(row, col);
if (col === 10){
if ( cellValue > 0 ) {
cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.color = 'black';
td.style.background = '#4FF635';
}
}
else if ( cellValue < 0 ) {
cellProperties.renderer = function (instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.fontWeight = 'bold';
td.style.color = 'black';
td.style.background = '#C84321';
}
}
else {
}
}
return cellProperties;
}
});
}
catch(e){
}}
Thanks.
