Export Multiple Grids in the Same PDF File
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | Created with version 2017.3.913 |
Description
How can I export many Grids in the same PDF file?
Solution
- Export one of the Grids by using the
_drawPDFfunction. - In the callback of the promise, export the other Grids.
- Append the result to the export of the initially exported Grid.
<div id="example">
<a id='export' class='k-button'>Export both grids </a>
<div id="grid"></div>
<div id="grid2"></div>
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
Multi-page grid with automatic page breaking
</div>
<div class="watermark">KENDO UI</div>
<div class="footer">
Page #: pageNum # of #: totalPages #
</div>
</div>
</script>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.8
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
$("#grid2").kendoGrid({
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.7
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
schema:{
model: {
fields: {
UnitsInStock: { type: "number" },
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsOnOrder: { type: "number" },
UnitsInStock: { type: "number" }
}
}
},
pageSize: 7
},
pageable: true,
groupable: true,
filterable: true,
columnMenu: true,
reorderable: true,
resizable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ width: 300, field: "UnitPrice", title: "Unit Price"},
{ width: 300, field: "UnitsOnOrder", title: "Units On Order"},
{ width: 300, field: "UnitsInStock", title: "Units In Stock" }
]
});
$('#export').on('click', function(){
var grid1 = $('#grid').data('kendoGrid');
var grid2 = $('#grid2').data('kendoGrid');
var progress = $.Deferred();
grid1._drawPDF(progress)
.then(function(firstGrid) {
grid2._drawPDF(progress)
.then(function(secondGrid){
secondGrid.children.forEach(function(x){
firstGrid.children.push(x);
})
return kendo.drawing.exportPDF(firstGrid, { multiPage: true });
}).done(function(dataURI) {
kendo.saveAs({
dataURI: dataURI,
fileName: "test.pdf"
});
progress.resolve();
})
})
})
});
</script>
<style>
/* Page Template for the exported PDF */
.page-template {
font-family: "DejaVu Sans", "Arial", sans-serif;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.page-template .header {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
border-bottom: 1px solid #888;
color: #888;
}
.page-template .footer {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
border-top: 1px solid #888;
text-align: center;
color: #888;
}
.page-template .watermark {
font-weight: bold;
font-size: 400%;
text-align: center;
margin-top: 30%;
color: #aaaaaa;
opacity: 0.1;
transform: rotate(-35deg) scale(1.7, 1.5);
}
/* Content styling */
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
kendo-pdf-document .customer-photo {
border: 1px solid #dedede;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>
</div>