I am trying to create an Excel export, it is only loading the records visible on the parent grid as well as the colModel (Header) of nested/child grid without their records.
What is happing on the first click of the export button it will download the file with just the parent grid records and if I click the export button a second time it downloads the complete data (include nested/child grid records).
As per my understanding Excel is created before nested/child grid data is being loaded. Any suggestions?
Here is the actual code.
SearchTerminalDetails: function (event) {
function getDetail(grid, rd) {
var detail = rd.pq_detail = rd.pq_detail || {};
detail.child = detail.child || $("<div></div>").pqGrid(childGrid(grid, rd));
return detail.child;
}
function exportData() {
var grid = this;
w = grid.exportExcel({ workbook: true, render: true }),
wrows = w.sheets[0].rows,
rows = [],
i = 0,
loading = grid.option('strLoading'),
pdata = grid.pageData();
grid.showLoading();
rows.push(wrows[0]);//parent header row.
var id = setInterval(function () {
var rd = pdata[i];
if (rd) {
rows.push(wrows[i + 1]);//parent data row.
var $detail = getDetail(grid, rd),
w2 = $detail.pqGrid('instance').exportExcel({
workbook: true,
render: true
});
w2.sheets[0].rows.forEach(function (rd2) {
//shift all cells to the right.
rd2.cells.forEach(function (cell) {
if (cell.indx != null)
cell.indx++;
})
//and add empty cell at beginning of every row.
rd2.cells.unshift({});
rows.push(rd2)
})
i++;
grid.option('strLoading', Math.round(i * 100 / pdata.length) + "%")
}
else {
clearInterval(id);
w.sheets[0].rows = rows;
var blob = pq.excel.exportWb({ workbook: w, type: 'blob' });//export 1st workbook into Excel file.
saveAs(blob, "Demo.xlsx");
grid.hideLoading();
grid.option('strLoading', loading);
}
});
}
var colModel = [
{ title: "", minWidth: 1, width: 1, type: "detail", resizable: false, editable: false, copy: false },
{
title: "Column 1": 100, dataType: "string", align: "left", dataIndx: "Name",
filter: { crules: [{ condition: 'contain' }], listeners: ['keyup'] }
},
{
title: "Column 2", width: 100, dataType: "date", align: "left", dataIndx: "Address",
filter: { crules: [{ condition: 'contain' }], listeners: ['keyup'] }
}
];
var dataModel = {
location: "remote",
sorting: "local",
sortIndx: ["Port"],
sortDir: ["up"],
method: "GET",
getUrl: function () {
var data;
// serialize our search criteria
$("#searchSCS").serializeArray().map(function (x) {
data = data == null ? (x.name + "=" + x.value) : (data + "&" + x.name + "=" + x.value);
});
return {
url: "some path.." + "?" + data
}
},
getData: function (response) {
var data = response.data;
return { curPage: response.curPage, totalRecords: response.totalRecords, data: data };
}
};
$("MainGrid").pqGrid({
colModel: colModel,
dataModel: dataModel,
height: $(document).height() * 0.40,
scrollModel: { autoFit: true, flexContent: true },
resizable: true,
selectionModel: { type: 'cell' },
hoverMode: 'row',
title: '<b></b>',
stripeRows: true,
columnBorders: true,
showTop: false,
showBottom: false,
roundCorners: false,
numberCell: { show: false },
flex: { on: true },
showTop: true,
filterModel: {
on: true,
mode: "AND",
header: true,
menuIcon: true
},
menuUI: {
tabs: ['filter'] //display only filter tab.
},
editable: false,
detailModel: {
cache: true,
collapseIcon: "ui-icon-plus",
expandIcon: "ui-icon-minus",
init: function (ui) {
var rowData = ui.rowData,
detailobj = childGrid($(this).pqGrid('instance'), rowData),
$grid = $("<div></div>").pqGrid(detailobj); //init the detail grid.
return $grid;
}
},
load: function (event, ui) {
CMN.utility.updateRecordsFound(ui);
if (ui.dataModel.data.length == 0) {
this.$summary[0].style.display = 'none';
}
else {
this.$summary[0].style.display = 'block';
}
this.refreshCM(colModel);
},
toolbar: {
items: [
{
type: 'button',
label: 'Export',
listener: exportData
}
]
}
});
var childGrid = function (gridMain, rowData) {
return {
width: "auto",
pageModel: { type: "local", rPP: 100, strRpp: "" },
showTop: false,
showBottom: false,
scrollModel: { autoFit: false, flexContent: true },
trackModel: { on: true },
sortModel: {
sorter: [{ dataIndx: 'PrimaryId', dir: "up" }]
},
showHeader: true,
columnBorders: true,
groupModel: {
on: true,
grandSummary: true
},
selectionModel: { type: 'cell' },
colModel: [
{ title: "Contact", width: '10%', dataType: "string", style: "padding:3px 10px;", dataIndx: "Contact", align: "left"},
{ title: "Address", width: '10%', dataType: "string", dataIndx: "Address", align: "left", editable: false }
],
dataModel: {
location: "remote",
sorting: "local",
sortIndx: ["Region"],
sortDir: ["up"],
method: "GET",
dataType: "JSON",
error: function () {
gridMain.rowInvalidate({ rowData: rowData });
},
url: "Some path..",
getData: function (response) {
var data = response.data; /
return { curPage: response.curPage, totalRecords: response.totalRecords, data: data };
}
},
wrap: false,
hwrap: true,
refresh: function (evt, ui) {
//refresh colModel after show/hide columns for grouped columns.
$(".selector").pqGrid("option", "colModel", colModel);
},
//flex: { one: true },
height: "flex",
numberCell: { show: false },
title: "<b></b>"
};
};
}
