Show Posts
1
ParamQuery Pro Evaluation Support / Export to Excel
« on: October 08, 2020, 09:44:15 pm »
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.
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.
Code: [Select]
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>"
};
};
}