Gopal Sharma Gopal Sharma - 18 days ago 5
AngularJS Question

Kendo Grid export to excel working on Local , but not on STAGE

I am trying to export to excel in Kendo Grid using AngularJs, It is working fine on Local, but not STAGE. I wasted my whole day in it, but not find any solution. Thanks in advance.
Error is:

TypeError: Cannot read property 'length' of undefined
at Function.map (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:1:12661)
at init.toDataURL (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:24:1105)
at init.<anonymous> (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:24:9157)
at Object.r (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:1:12947)
at Object.<anonymous> (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:2:4784)
at u (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:2:3416)
at Object.fireWith [as resolveWith] (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:2:4228)
at Object.r.(anonymous function) [as resolve] (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:2:5208)
at init.<anonymous> (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:24:3882)
at Object.r (http://lm.stage.cargoclix.net/js/lib-0fb5682e33.js:1:12947)


My Html Code



<div kendo-grid="vm.grid" id="grid" k-data-source="vm.gridOptions.datasource" k-options="vm.gridOptions" class="lm-panel-body">


JS Code



vm.getGridOptions = function () {
vm.gridOptions = {
datasource: new kendo.data.DataSource({
type: "odata",
transport: {
read: function (options) {
if (!!$scope.figure.figureId) {
if (!!options.data.filter) {
$scope.filterChanged(vm.gridOptions.datasource, vm.getFigureData.dataSource.name);
for (var i = 0; i < options.data.filter.filters.length; i++) {
if (options.data.filter.filters[i].value.indexOf("00:00:00") > -1) {
var date = new Date(options.data.filter.filters[i].value);
var month = ("0" + (date.getMonth() + 1)).slice(-2);
var day = ("0" + date.getDate()).slice(-2);
var fullDate = date.getFullYear() + "/" + month + "/" + day;
options.data.filter.filters[i].value = fullDate;
}
}

}
else if (!options.data.filter)
{
$scope.filterChanged(undefined, vm.getFigureData.dataSource.name);
}
gridService.get(options, $scope.figure.figureId).then(function (data) {
});
}
}
},
schema: {
data: function (data) {
if (data.data) {
return data.data;
}
},
total: function (data) {
if (data.total) {
return data.total;
}
}
},
group: vm.JsonGroupingCloumns,
aggregate: vm.aggregatesList,
pageSize: vm.gridConfigurationJson.PageSize ? vm.gridConfigurationJson.PageSize : 10,
serverPaging: true,
serverSorting: true,
serverFiltering: true
}),
dataBound: function (e) {
if (vm.childGridId > 0 && vm.detailGridFigureParams == undefined) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
this.collapseRow(this.tbody.find("tr.k-master-row").first());
}
if (e.sender.pager.dataSource._pageSize != 10) {
if (vm.gridConfigurationJson.PageSize != e.sender.pager.dataSource._pageSize) {
saveGridConfigration(e, $scope.figure.figureId);
}
}
},
sortable: {
mode: "single",
allowUnsort: false
},
pageable: {
refresh: true,
pageSizes: [10, 25, 50, 100, 200, "All"],
buttonCount: 5,
},
filterable:true,
scrollable: true,
resizable: true,
reorderable: true,
columnMenu: true,
columns: vm.columnsList,
excel: {
allPages: true,
filterable: true
},
excelExport: function (e) {
var filename = "";
if ($scope.figure.captionView != undefined) {
filename = $scope.figure.captionView;
}
else if ($scope.figure.caption != undefined) {
filename = $scope.figure.caption;
}
debugger;
if (vm.childGridId > 0)
{
e.preventDefault();
var workbook = e.workbook;

detailExportPromises = [];

var masterData = e.data;

for (var rowIndex = 0; rowIndex < masterData.length; rowIndex++) {
var masterRowData = {};
masterRowData.data = masterData[rowIndex];
exportChildData(rowIndex, masterRowData);
}

$.when.apply(null, detailExportPromises)
.then(function () {
// get the export results
var detailExports = $.makeArray(arguments);

// sort by masterRowIndex
detailExports.sort(function (a, b) {
return a.masterRowIndex - b.masterRowIndex;
});

//// add an empty column
workbook.sheets[0].columns.unshift({
width: 30
});

// prepend an empty cell to each row
for (var i = 0; i < workbook.sheets[0].rows.length; i++) {
workbook.sheets[0].rows[i].cells.unshift({});
}

// merge the detail export sheet rows with the master sheet rows
// loop backwards so the masterRowIndex doesn't need to be updated
for (var i = detailExports.length - 1; i >= 0; i--) {
var masterRowIndex = detailExports[i].masterRowIndex + 1; // compensate for the header row

var sheet = detailExports[i].sheet;

// prepend an empty cell to each row
for (var ci = 0; ci < sheet.rows.length; ci++) {
if (sheet.rows[ci].cells[1].value) {
sheet.rows[ci].cells.unshift({});
}
}

// insert the detail sheet rows after the master row
[].splice.apply(workbook.sheets[0].rows, [masterRowIndex + 1, 0].concat(sheet.rows));
}

// save the workbook

kendo.saveAs({
dataURI: new kendo.ooxml.Workbook(workbook).toDataURL(),
fileName: filename + ".xlsx"
});
});
}else
{
e.workbook.fileName = filename + ".xlsx";
}
},
//pdf: {
// allPages: true,
// fileName: $scope.vm.getFigureData.caption + ".pdf"
//},
columnReorder: function (e) {
saveGridConfigration(e,$scope.figure.figureId);
},
columnResize: function (e) {
saveGridConfigration(e,$scope.figure.figureId);
}
};
if (vm.childSourceChecked == 1) {
if (vm.childGridId > 0) {
vm.gridOptions.detailInit = detailInit;
}
vm.childSourceChecked = 2;
}
var clearFilterTemplate = $("#clearFilterButtonTemplate").html();
if(clearFilterTemplate)
{
vm.gridOptions.toolbar = [
"excel",
{ text: "Clear filter", template: kendo.template($("#clearFilterButtonTemplate").html()) }
]
}

};

Answer

I had a similar issue.

You may have a different version of jquery in dev vs. production.
Please update your jquery to version 2.2.4 or higher.
This will solve your problem.

Comments