KendoUI Grid: Export to PDF (second part)


In my previous post I introduced you to the new feature on how to export the grid to PDF, even some of the options. Now I will cover some more advanced features linked to the new setOptions improved in this same KendoUI 2014 Q3 release.

Kendo UI Grid: advanced features

Shall I need to have the “Export to PDF” defined as a button in the toolbar

No, of course not. Telerik engineers though on that and the same function that is invoked when you click the toolbar button, can be invoked programmatically from your code. You just need to invoke saveAsPDF method on the grid.

Here is our grid definition:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    columns   : [
        ...
    ],
    ...
}).data("kendoGrid");

Invoking it would be:

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

What about if I want to change some option?

You can! This release improve setOptions allowing you to change most (any?) option that you use in KendoUI Grid initialization.

Example: We want to define several button to save the document as PDF but different paper sizes. This can be done defining the following buttons:

<button id="pdf-a4" class="k-button">PDF-A4</button>
<button id="pdf-a5" class="k-button">PDF-A5-Landscape</button>

and then the code would be:

$("#pdf-a4").on("click", function() {
    grid.setOptions({ pdf: { paperSize: "A4" } });
    grid.saveAsPDF();
});
$("#pdf-a5").on("click", function() {
    grid.setOptions({ pdf: { paperSize: "A5", landscape: true } });
    grid.saveAsPDF();
});

Where before invoking saveAsPDF I first invoke setOptions and I overwrite

    only

the options that I want to define. The ones not defined here keep their old value.

Now, our page looks like:

Buttons for exporting to PDF different sizes
Buttons for exporting to PDF different sizes

And the generated page as A4 is:

PDF export to A4 portrait
PDF export to A4 portrait

While the A4 landscape is:

PDF export to A5 landscape
PDF export to A5 landscape
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s