Grid PDF Export MVVM Template Header/Footer/Watermark

[Nick]

So I am trying to use the template with the pdf export of a grid and I can't seem to find the correct syntax.

The grid exports to pdf, at the size outlined in the grid template, in landscape, but there is nothing from the page-template

included (the footer, header, etc).

<script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                Acme Inc.
            </div>
            <div class="watermark">I C L A</div>
            <div class="footer">
                The Important Message Goes Here, all else is fluff
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            </div>
        </div>
</script>

 

 

So then I have the grid template

...

data-pdf= "{
                    'fileName': 'Greeeid.pdf',
                    'filterable': true,
                    'paperSize': [4000, 1500],
                    'margin': '{ top: 3cm, right: 1cm, bottom: 1cm, left: 1cm }',
                    'multipage': true,
                    'landscape': true,
                    'scale': '0.75',
                    'allPages': true,
                    'template': kendo.template($('#page-template').html())
                    }"

...

I think the problem is in the template line just above, but it may also be to do with the margin attribute.

I have yet to see good documentation on these properties in the KendoUI MVVM context, and the syntax seems to be

very unforgiving regarding single/double quotes, what needs to be a string etc..

Can anyone see the problem here?

Thanks -

[Stefan]

Hello Nick,

The data-pdf property is expecting an object to properly set all the configurations. The configuration names does not need to be declared as string.

I have created a sample Dojo example based on your implementation, demonstrating how to use pdf export in MVVM with the Kendo UI Templates.

http://dojo.telerik.com/IpazA

We appreciate your advice for our MVVM documentation, and we will try to improve it to ensure the information is full and clear.

Regards,
Stefan
Telerik

 

 

[Nick]

Hi Stefan,

Thank you for trying to help me out, I really appreciate it.

So it looks like it should be working, however the header, footer, and watermark are not rendering in the pdf file.

All of the properties are correctly transferring (paper size, file name, etc.).

When I print to the console I get the template in the pdf attribute for the grid:

console.log($("#grid").data("kendoGrid").options.pdf);

 

The output is:

Object
allPages:true
author:null
avoidLinks:true
creator:"Kendo UI PDF Generator v.2016.1.226"
date:null
fileName:"Grid_file_name_<20160620>.pdf"
keywords:null
landscape:true
margin:Object
multiPage:true
paperSize:Array[2]
0:3685.0393700787404
1:1133.8582677165355
length:2
__proto__:Array[0]
proxyURL:""
repeatHeaders:true
scale:0.8
subject:null
template:"<div class="page-template"><div class="header">Acme Inc.</div><div class="watermark">I C L A</div><div class="footer">The Important Message Goes Here, all else is fluff<div style="float: right">Page #: pageNum # of #: totalPages #</div></div></div>"
title:null
__proto__:Object

 

So everything seems to be correctly in place, it just refuses to render the required header/footer/watermark.

Do you have any ideas why this may be happening?

[Nick]

Also I am not using the standard grid toolbar, rather the PDF Export is being triggered by a button in another template (a toolbar template) which finally calls

$("#Grid").data("kendoGrid").saveAsPDF();

 

Could that be a culprit?

[Nick]

I just tried it with the standard grid toolbar using ['pdf'] and got the same results so it's not that.

[Nick]

I've got it.

I don't know why the former doesn't work but the following does.

kendo.drawing.drawDOM($("#Grid"),
                        {
                            allPages: true,
                            avoidLinks: true,
                            paperSize: ["1300mm", "200mm"],
                            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                            landscape: true,
                            template: $("#page-template").html()
                        }).then(function (documentgroup) {

                            // Generate PDF file
                            kendo.drawing.pdf.saveAs(documentgroup, fileName);
                        });

 

I inserted that code in the click handler function, where I was previously calling

$("#breakDetailsGrid").data("kendoGrid").saveAsPDF();

 

Still tweaking it but at least I have my footer.

Thanks for the help!

 

[Nick]

I've got it.

I don't know why the former doesn't work but the following does.

kendo.drawing.drawDOM($("#Grid"),
                        {
                            allPages: true,
                            avoidLinks: true,
                            paperSize: ["1300mm", "200mm"],
                            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
                            landscape: true,
                            template: $("#page-template").html()
                        }).then(function (documentgroup) {

                            // Generate PDF file
                            kendo.drawing.pdf.saveAs(documentgroup, fileName);
                        });

 

I inserted that code in the click handler function, where I was previously calling

$("#breakDetailsGrid").data("kendoGrid").saveAsPDF();

 

Still tweaking it but at least I have my footer.

Thanks for the help!

 

[Stefan]

Hello Nick,

I'm glad to hear that the issue is resolved.

If you want us to make an additional investigation and check why it was not working in a first place, you can send us the runnable example.


Regards,
Stefan
Telerik