I am using below code for binding handsontable . my Datasource “MainGridDataSource.Data[0]” contain 15000 rows and 10 columns . Chrome take only 8 seconds to bind handsontable ,however IE11 is not able to bind it even after 3 min… any suggestion?
hot = new Handsontable(container, {
data: JSON.parse(JSON.stringify(MainGridDataSource.Data[0])),
contextMenu: true,
colHeaders: true,
rowHeaders: false,
dropdownMenu: false,
filters: true,
autoColumnSize: {
samplingRatio: 23
},
stretchH: ‘all’,
manualRowResize: true,
manualColumnResize: true,
columnSorting: true,
sortIndicator: true,
outsideClickDeselects: false,
fragmentSelection: true,
disableVisualSelection: true,
colHeaders: MainGridDataSource.Headers[0],
columns: MainGridDataSource.Columns[0],
viewportRowRenderingOffset: 40,
viewportColumnRenderingOffset: 20,
height: 400,
width: 885,
afterRender: function () {
// insitu.fn.wait(false);
console.log(“after”);
$("#wait").css(“display”, “none”);
},
afterFilter: function (formulaStack) {
var myFormulas = formulaStack;
createFilterString();
},
contextMenu: {
callback: function (key, options) { MenuClicked(key, options, hot, MainGridDataSource.Columns[0], dataSchema, MainGridDataSource.Headers[0], col, sch, hdr);
},
items: {
“DateFunctions”: {
name: ‘DateFunctions’,
key: ‘DateFunctions’,
hidden: function () {
var selected = hot.getSelected();
var colIndex = selected[0][1];
var column = MainGridDataSource.Columns[0][colIndex];
if (column.type.toLowerCase() != ‘date’) {
return 1;
}
else
return 0;
},
submenu: {
items: [{
name: “DayOfWeek”,
key: “DateFunctions:DayOfWeek”
},
{ key: “DateFunctions:LastDayOfMonth”, name: “LastDayOfMonth” },
{ key: “DateFunctions:LastBusinessDayOfMonth”, name: “LastBusinessDayOfMonth” },
{ key: “DateFunctions:FirstBusinessDayOfMonth”, name: “FirstBusinessDayOfMonth” },
{ key: “DateFunctions:FirstDayOfMonth”, name: “FirstDayOfMonth” },
{ key: “DateFunctions:Month”, name: “Month” },
{ key: “DateFunctions:Day”, name: “Day” },
{ key: “DateFunctions:Year”, name: “Year” },
{ key: “DateFunctions:Quarter”, name: “Quarter” },
{ key: “DateFunctions:AddOneDay”, name: “AddOneDay” },
{ key: “DateFunctions:AddTwoDays”, name: “AddTwoDays” },
{ key: “DateFunctions:AddThreeDays”, name: “AddThreeDays” },
{ key: “DateFunctions:SubtractOneDay”, name: “SubtractOneDay” },
{ key: “DateFunctions:SubtractTwoDays”, name: “SubtractTwoDays” },
{ key: “DateFunctions:SubtractThreeDays”, name: “SubtractThreeDays” }
]
},
},
"DateFormats": {
name: "DateFormats",
key: "DateFormats",
hidden: function () {
var selected = hot.getSelected();
var colIndex = selected[0][1];
var column = MainGridDataSource.Columns[0][colIndex];
if (column.type.toLowerCase() != 'date') {
return 1;
}
else
return 0;
},
submenu: {
items: [
{ key: "DateFormats:MM/dd/yyyy", name: "MM/dd/yyyy" },
{ key: "DateFormats:MMddyyyy", name: "MMddyyyy" },
{ key: "DateFormats:yyyy/MM/dd", name: "yyyy/MM/dd" },
{ key: "DateFormats:yyyyMMdd", name: "yyyyMMdd" },
{ key: "DateFormats:yyyy-MM-dd", name: "yyyy-MM-dd" },
{ key: "DateFormats:dd/MMM/yy", name: "dd/MMM/yy" },
{ key: "DateFormats:M/dd/yyyy", name: "M/dd/yyyy" },
{ key: "DateFormats:MM/dd/yyyy", name: "MM/dd/yyyy HH:mm:ss" },
{ key: "DateFormats:M/d/yyyy", name: "M/d/yyyy" },
{ key: "DateFormats:MM/dd/yyyy:HH:mm:ss", name: "MM/dd/yyyy:HH:mm:ss" },
{ key: "DateFormats:dd-MMM-yy", name: "dd-MMM-yy" },
{ key: "DateFormats:MM/dd/yyyy HH:mm:ss tt", name: "MM/dd/yyyy HH:mm:ss tt" },
{ key: "DateFormats:MM/dd/yy", name: "MM/dd/yy" },
{ key: "DateFormats:dd-MMM-yyyy", name: "dd-MMM-yyyy" },
{ key: "DateFormats:ddMMMyyyy", name: "ddMMMyyyy" },
{ key: "DateFormats:dd-MM-yyyy", name: "dd-MM-yyyy" },
{ key: "DateFormats:ddMMMyy", name: "ddMMMyy" },
{ key: "DateFormats:d-MMM-yyyy", name: "d-MMM-yyyy" },
{ key: "DateFormats:dd MMM yyyy", name: "dd MMM yyyy" },
{ key: "DateFormats:dd MMM yy", name: "dd MMM yy" },
{ key: "DateFormats:dd MMM yy", name: "dd MMM yy" },
{ key: "DateFormats:M-dd-yy", name: "M-dd-yy" },
{ key: "DateFormats:dd/MM/yyyy", name: "dd/MM/yyyy" },
{ key: "DateFormats:dd/MM/yyyy HH:mm:ss", name: "dd/MM/yyyy HH:mm:ss" },
{ key: "DateFormats:M/d/yyyy HH:mm:ss tt", name: "M/d/yyyy HH:mm:ss tt" },
{ key: "DateFormats:MMddyy", name: "MMddyy" },
{ key: "DateFormats:dd_MM_yyyy", name: "dd_MM_yyyy" },
{ key: "DateFormats:M/dd/yy", name: "M/dd/yy" },
{ key: "DateFormats:dd/MM/yy", name: "dd/MM/yy" },
{ key: "DateFormats:MM-dd-yy", name: "MM-dd-yy" },
{ key: "DateFormats:d-MMM-yy", name: "d-MMM-yy" },
{ key: "DateFormats:MM-dd-yy", name: "MM-dd-yy" },
{ key: "DateFormats:M-d-yy", name: "M-d-yy" },
{ key: "DateFormats:MMddyyHHmm", name: "MMddyyHHmm" },
{ key: "DateFormats:MMMM dd, yyyy", name: "MMMM dd, yyyy" },
{ key: "DateFormats:MMMM dd, yyyy", name: "MMMM dd, yyyy" },
{ key: "DateFormats:ddMMyyyy", name: "ddMMyyyy" },
]
}
},
"NumberFunctions": {
name: 'NumberFunctions',
key: 'NumberFunctions',
hidden: function () {
var selected = hot.getSelected();
var colIndex = selected[0][1];
var column = MainGridDataSource.Columns[0][colIndex];
if (column.type.toLowerCase() != 'numeric') {
return 1;
}
else
return 0;
},
submenu: {
items: [
{ key: "NumberFunctions:FlipSign", name: "FlipSign" },
{ key: "NumberFunctions:ConvertToPositive", name: "ConvertToPositive" },
{ key: "NumberFunctions:ConvertToNegative", name: "ConvertToNegative" },
{ key: "NumberFunctions:RemoveDecimals", name: "RemoveDecimals" },
{ key: "NumberFunctions:GetCeilingValue", name: "GetCeilingValue" },
{ key: "NumberFunctions:GetFloorValue", name: "GetFloorValue" },
{ key: "NumberFunctions:FormatToTwoDecimals", name: "FormatToTwoDecimals" },
{ key: "NumberFunctions:FormatToThreeDecimals", name: "FormatToThreeDecimals" },
{ key: "NumberFunctions:FormatToFourDecimals", name: "FormatToFourDecimals" },
{ key: "NumberFunctions:FormatToSixDecimals", name: "FormatToSixDecimals" },
{ key: "NumberFunctions:DivideBy_100", name: "DivideBy_100" },
{ key: "NumberFunctions:DivideBy_1000", name: "DivideBy_1000" },
{ key: "NumberFunctions:DivideBy_10000", name: "DivideBy_10000" },
{ key: "NumberFunctions:MultiplyBy_10", name: "MultiplyBy_10" },
{ key: "NumberFunctions:MultiplyBy_100", name: "MultiplyBy_100" },
{ key: "NumberFunctions:MultiplyBy_1000", name: "MultiplyBy_1000" },
{ key: "NumberFunctions:MultiplyBy_10000", name: "MultiplyBy_10000" },
]
}
},
"NumberFormats": {
name: "NumberFormats",
key: "NumberFormats",
hidden: function () {
var selected = hot.getSelected();
var colIndex = selected[0][1];
var column = MainGridDataSource.Columns[0][colIndex];
if (column.type.toLowerCase() != 'numeric') {
return 1;
}
else
return 0;
},
submenu: {
items: [
{ key: "NumberFormats:#,###,###,###,###.##", name: "#,###,###,###,###.##" },
{ key: "NumberFormats:#.###.###.###.###,##", name: "#.###.###.###.###,##" },
{ key: "NumberFormats:#################", name: "#################" },
{ key: "NumberFormats:###############.##", name: "###############.##" },
]
}
},
"ExtractbyPosition": {
name: "Extract By Position",
key: "position",
disabled: function () {
// Disable option when first row was clicked
if ($scope.highlightedTextGlobal == "undefined" || $scope.highlightedTextGlobal.toString().trim() == "")
return true;
}
},
"ExtractbyPattern": {
name: "Extract By Pattern",
key: "pattern",
disabled: function () {
// Disable option when first row was clicked
if ($scope.highlightedTextGlobal == "undefined" || $scope.highlightedTextGlobal.toString().trim() == "")
return true;
}
},
"ReplaceValues": {
name: "Replace Values",
key: "ReplaceValues",
},
"lookUp": {
name: "LookUps",
key: "LookUps",
},
"DeleteColumn": {
name: "Delete Column",
key: "Delete",
disabled: function () {
// Disable option when first row was clicked
var selected = hot.getSelected();
var curColumn = MainGridDataSource.Headers[0][selected[0][1]];
var indexHeader = FileColumns.indexOf(curColumn);
if (indexHeader > -1)
return true;
}
}
}
},
});