Error while copy past data from excel to handsontable grid - html

Question

> handsontable.full.js?v=1.2:10476 Uncaught TypeError: Cannot read property 'classList' of undefined
> at _removeClass (handsontable.full.js?v=1.2:10476)
> at removeClass (handsontable.full.js?v=1.2:10531)
> at handsontable.full.js?v=1.2:5426
> at done (handsontable.full.js?v=1.2:5502)
> at handsontable.full.js?v=1.2:5517
> at handsontable.full.js?v=1.2:23966
> at ColumnSettings.Handsontable.AutocompleteValidator [as validator] (handsontable.full.js?v=1.2:23949)
It's working fine when i am pasting 4 to 5 columns but when i trying more than 7 getting above error.previously i tested in tab it's works fine there but when i moved handsontable grid to bootstrap modal getting this error.please help i am trying to understand.
please find below how i created handsontable
manualHot = new Handsontable(container, {
rowHeaders: true,
colHeaders: true,
startRows: 100,
startCols: 125,
// columns: columns,
dropdownMenu: true,
contextMenu: true,
filters:true,
manualColumnResize: true,
height: 500,
wordWrap:false,
colWidths: 100,
rowHeights: 23,
autoColumnSize: true,
columnSorting: true,
fixedRowsTop:1,
copyable:true,
sortFunction: function(sortOrder, columnMeta) {
return function(a, b) {
var plugin = manualHot.getPlugin('columnSorting');
var sortFunction;
if (a[0] === 0) {
return -1;
}
switch (columnMeta.type) {
case 'date':
sortFunction = plugin.dateSort;
break;
case 'numeric':
sortFunction = plugin.numericSort;
break;
default:
sortFunction = plugin.defaultSort;
}
return sortFunction(sortOrder, columnMeta)(a, b);
};
},
trimDropdown :false,
formulas: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (row === 0) {
cellProperties.type = 'dropdown';
cellProperties.source= colHeaderArr;
cellProperties.allowInvalid = false;
}
return cellProperties;
},
afterValidate: function (isValid, value, row, prop, source) {
if (source === 'loadData' || source === 'internal' ) {
return;
}
if (!isValid ) {
errorHeader[prop]=headerCols[prop];
}
},
});
manualHot.addHook('beforeChange', function(changes, source) {
dupheaders=[]
dupheaders.length=0;
if (source === 'loadData' || source === 'internal' || changes.length > 1) {
return;
}
var row = changes[0][0];
var prop = changes[0][1];
var newVal = changes[0][3];
var oldVal=changes[0][2];
if ( row ===0) {
headerCols[prop]=newVal;
var sorted_head = headerCols.slice().sort();
for (var i = 0; i < headerCols.length - 1; i++) {
if (sorted_head[i + 1] == sorted_head[i]) {
if(sorted_head[i]){dupheaders.push(sorted_head[i]);}
}
}
if(dupheaders.length>0){
var errMsg='Duplicate Headers :<br>'+dupheaders;
setTimeout(function(){$('#manualDataOnlinePrep-Tab').unblock();},1000);
common.showMessage(errMsg, false, "error", "middle-center");
}
errorHeader.splice(prop, 1);
setColumnType(colProp,prop,newVal, this,txnTypeArr);
}
});
manualHot.init();
}
function setColumnType(columnProp,col,newVal, instance,ddValue) {
if(newVal === 'Reporting Code Description' ) {
columnProp[col].type='dropdown';
columnProp[col].source=ddValue;
}
else{
if(newVal.match(/^.*Date$/)){
columnProp[col].type='date';
columnProp[col].dateFormat=document.getElementById("dateFormat_2").value;
columnProp[col].allowInvalid=true;
}
else if (newVal.match(/^.*Amount$/)){
columnProp[col].type='numeric';
columnProp[col].format= '[00,00,000].00';
columnProp[col].allowInvalid=false;
}
else if (newVal.match(/^.*Rate$/)){
columnProp[col].type='numeric';
columnProp[col].format= '0.[000000]';
columnProp[col].allowInvalid=false;
}
else{
columnProp[col].type='text';
}
}
instance.updateSettings({columns: columnProp},{contextMenu:true});
instance.validateCells(function() {
instance.render();
});
}