I am trying to export 2 Kendo grids with only a few of rows of data on the same PDF page and a chart on the next page. I am able to current export these in 3 different pages. Here is how I'm doing it now.
function OnPdfExport() {
var grid1 = $('#Grid1').data('kendoGrid');
var grid2 = $('#Grid2').data('kendoGrid');
var progress = $.Deferred();
kendo.drawing.drawDOM($("#Chart"), { forcePageBreak: "#Chart", paperSize: "A4", landscape: true, margin: { left: "2cm", top: "2cm", right: "1cm", bottom: "1cm" }}).done(function (chart) {
grid1._drawPDF(progress).then(function (firstGrid) {
grid2._drawPDF(progress).then(function (secondGrid) {
secondGrid.children.forEach(function (x) {
firstGrid.children.push(x);
})
firstGrid.children.push(chart);
return kendo.drawing.exportPDF(firstGrid, { multiPage: true });
}).done(function (dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: "Report.pdf"
});
progress.resolve();
})
})
})
}
$("#Grid1").kendoGrid({
dataSource: gridDataSource,
pdf: {
//allPages: true,
paperSize: "A4",
margin: { top: "6cm", right: "1cm", bottom: "1cm", left: "1cm" },
landscape: true,
template: $("#page-template").html()
},
columns: [{
... // many columns
}]
});
$("#Grid2").kendoGrid({
dataSource: gridDataSource2,
pdf: {
paperSize: "A4",
margin: { top: "1cm", right: "1cm", bottom: "1cm", left: "1cm" },
landscape: true
},
columns: [{
... // many columns
}]
});
Is there a way I could export the 2 grids with a report header template(#page-template) on first page of the PDF and a chart on the next page in the same PDF?