I have some summary header for my Grid but in sepparated DOM. HTML looks like this:
<div id="report">
<div class="report-header"></div>
<div class="report-table"></div>
</div>
kendo.drawing.drawDOM("#report",
{ allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.5,
title: 'Raport dzienny'
}).then(function(group){
kendo.drawing.pdf.saveAs(group, 'file.pdf');
});
Grid should have around 30 rows, it isn't fully drawn. It's look like DrawingAPI draw only visible part of Grid. How to fix it?
5 Answers, 1 is accepted
Hello Daniel,
To enable multiple pages of the Kendo UI Grid PDF Export, I suggest to use the native Kendo UI Grid pdf export functionality. When pdf.allPages is set to true in the Grid PDF export settings, the widget dataSource will make requests for all the pages. In contrast - the Kendo UI Drawing API can only draw what is present on the page.
http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#export-of-all-pages
Note that the Kendo Drawing PDF Options API which are slightly different that the Kendo UI Grid's native PDF Export.:
Kendo Drawing API:
http://docs.telerik.com/kendo-ui/api/javascript/drawing/pdfoptions
Kendo UI Grid PDF Export API:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pdf
In case there is a requirement to export other DOM elements along with the Kendo UI Grid, a sample configuration can be found in this forum post:
http://www.telerik.com/forums/export-pdf-in-multiple-pages#jKp6jQLT9U20BUVDxEpHYA
Please let me know if you need more help in configuring the Kendo UI Grid PDF Export.
Alex
Telerik

I tried solution from this posts: http://www.telerik.com/forums/export-pdf-in-multiple-pages#jKp6jQLT9U20BUVDxEpHYA but still there is some problems. Now header is in seperated page and also Grid isn't fully drawen. I include zip with screenshot from my app and pdf.
var
progress = $.Deferred();
kendo.drawing.drawDOM($(
"#report-"
+self.activeReport+
" .report-header"
))
.done(
function
(header) {
table.grid._drawPDF(progress)
.then(
function
(root) {
root.children.unshift(header);
return
kendo.drawing.exportPDF(root, {
paperSize:
"a4"
,
margin: {left:
"1cm"
, top:
"1cm"
, right:
"1cm"
, bottom:
"1cm"
},
// allPages: true,
landscape:
true
,
repeatHeaders:
true
,
template: $(
"#page-template"
).html(),
scale: 0.5,
title:
'Raport dzienny'
});
})
.done(
function
(dataURI) {
console.log(
"Okay"
);
kendo.saveAs({
dataURI: dataURI,
fileName:
"test.pdf"
});
progress.resolve();
});
});
The Kendo UI Grid PDF Export pageTemplate was introduced in Q2 2016. I think that the page template may be better suited for your requirements and also easier and cleaner to implement. The page template provides a highly customizable page layout and can include additional DOM elements.
http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#page-template
For your convenience, I modified one of our demos to match the settings in the ticket:
http://dojo.telerik.com/uSato
Kind Regards,
Alex
Telerik

I provided an answer to the similar question in the following forum thread:
http://www.telerik.com/forums/exporting-multiple-charts-(and-grids)-to-pdf
If additional assistance is needed, please continue the discussion only in one of the thread by your choice.
Regards,
Stefan
Progress Telerik