KendoUI Grid export PDF: now you can!

onabai KendoUI

Many interesting new features in KendoUI Q3 2014 and many related with KendoUI Grid. Following my previous post on Multi-header grids, I will cover a second new functionality: export to PDF.

KendoUI Grid export to PDF

How many times did you want to get your table / grid saved as PDF file? and what about if you don’t have to write any code neither in the server nor in the browser? That’s what we get in KendoUI 2014 Q3 and the very best, it is as simple as add a button to the toolbar.

Defining the Export to PDF button

Defining a toolbar is as simple as adding toolbar and an array of strings identifying the commands. Previous releases support built-in commands as create, save, sync… Now we have also pdf for exporting the table with the same filters, sorting order, groupings… that we have in screen.

So our grid will look like as:

Export to PDF
Export to PDF

and the definition is as simple as:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    toolbar: [ "pdf" ],
    editable  : false,
    pageable  : true,
    columns   : [
        { field: "Id", title: "Id" },
        { field: "Name", title: "Name" }
    ]
}).data("kendoGrid");

And you get:

Exported PDF (default options)
Exported PDF (default options)

But there are more options that you can define as Author, Date, File Name, Keywords, landscape (true or false), margin or even Paper Size. This is as simple as:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    toolbar: [ "pdf" ],
    pdf: {
       author:     "OnaBai",
       date:       new Date("2014/11/20"),
       fileName:   "onabai-example.pdf",
       keywords:   "onabai, example, kendo-ui",
       landscape:  false,
       margin: {
            left: "1in",
            right: "2cm",
            top: "1in",
            bottom: "4cm"
       },
       paperSize: "A4"
    },
    editable  : false,
    pageable  : true,
    columns   : [
        { field: "Id", title: "Id" },
        { field: "Name", title: "Name" }
    ]
}).data("kendoGrid");

Looking now as:

PDF with options
PDF with options

But there are many more as title, subject and proxy url.

Customizing the button message

Yes, once again you can customize the message shown in the button. It is as for the other commands, defining messages.commands.pdf:

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    toolbar: [ "pdf" ],
    messages: {
        commands: {
            pdf: "PDF"
        }
    },

2 thoughts on “KendoUI Grid export PDF: now you can!”

    • Export cannot add a new column. Said same thing in different way: you cannot have different columns in PDF and in HTML. BUT you have an event handler that hides/shows a column, then generates the PDF and finally reverts to the original view.

      Reply

Leave a comment