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

KendoUI Grid export PDF: now you can!


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"
        }
    },

KendoUI Grid multi-column headers: now you can!


Many interesting new features in KendoUI Q3 2014 and many related with KendoUI Grid. I’ll be writing about some of them in the next posts including:

  1. Export to PDF
  2. Export to CSV
  3. New TreeList widget (despite this is a tree, it might be considered as nested grids)
  4. and the first of these post series multi-column headers

KendoUI Grid Multi-Column headers

This is something that has been requested for a long time and is the capacity of having multiple columns in a Grid under the same title or having multiple levels of titles. The same thing that you do in Excel when you merge several header cells.

Excel with merged header cells
Excel with merged header cells

In KendoUI, you had to live without merging cells and get one level headers (one header for each column).

KendoUI Grid with simple headers
KendoUI Grid with simple headers

But with KendoUI Q3 2014, you can also get the same effect by defining inside a column an array of columns. An idea really neat and transparent for previous definition syntax (backwards compatible).

Defining multi-columns

The definition of simple headers is an array of columns:

columns : [
    { field: "FirstName", width: 90, title: "First Name" },
    { field: "LastName", width: 200, title: "Last Name" },
    { field: "City", width: 200 }
]

What KendoUI did is extend the definition with one new attribute called columns that can be an array of columns.

columns : [
    {
        title: "Details",
        columns: [
            { field: "FirstName", width: 90, title: "First Name" },
            { field: "LastName", width: 200, title: "Last Name" }
        ]
    },
    { field: "City", width: 200 }
]

With this simple extension and minimum code change, I’ve been able to group FirstName and LastName columns under a Details header getting:

KendoUI Grid with merged headers
KendoUI Grid with merged headers

Really simple and very userful: Thanks Telerik!

Note: As you can see the structure of the data in the DataSource is the same than for simple headers, one question is the presentation where First and Last Name are grouped under Details and another is the Data Model where we do not have such grouping.