Export Kendo Grid Data To PDF At Client Side Using Jquery & AngularJS

Export Kendo

The Kendo UI Grid provides client PDFexport functionality which is powered by the underlying Drawing API engine of the Kendo UI framework. To enable it, include the corresponding command to the grid toolbar and configure the PDF Export settings. For instance, you can specify - export all pages, margins, paper size, font, etc.

To initiate the export programmatically, you can call the saveAsPdf method from the client API. Furthermore, you have the ability to customize the look and feel of the exported grid table by wiring the pdfExport event of the Grid.

<script>
    $(document).ready(function() {
        $("#grid").kendoGrid({
            toolbar: ["pdf"],
            pdf: {
                allPages: true,
                avoidLinks: true,
                paperSize: "A4",
                margin: {
                    top: "2cm",
                    left: "1cm",
                    right: "1cm",
                    bottom: "1cm"
                },
                landscape: true,
                repeatHeaders: true,
                template: $("#page-template").html(),
                scale: 0.8
            },
            dataSource: {
                type: "odata",
                transport: {
                    read: //call data source method
                },
                pageSize: 20
            },
            height: 550,
            sortable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            columns: [{
                field: "ID",
                title: "ID",
                hidden: false
            }, {
                field: "Name",
                title: "Name",
                hidden: false
            }, {
                field: "DOB",
                title = "Date Of Birth",
                width: 150,
                hidden: true
            }]
        });
    });
</script>

How to Call Export to PDF

The toolbar option to provide an export option is great. It lets you add the export feature without you doing much coding. But what if you have a situation where you want to add a button outside of the Grid i.e. no toolbar button. And, you want the Grid to be exported to PDF on click of that external button.

 

Kendo UI Grid covers you in this scenario by exposing a method called “saveAsPDF()”. You just grab the instance of the Grid at runtime and invoke the method “saveAsPDF()” to start the export. That’s how easy and simple it is. Here is the code snippet to show this.

<div id="grid"></div> <br> <button id="btnExport">Export to PDF</button>
<script>
    $("#btnExport").kendoButton({
        click: function() {
            $("#grid").data("kendoGrid").saveAsPDF();
        }
    });
</script>

How to Customize the Exported PDF File

Kendo UI Grid also provides certain options which can be set on the Grid itself to control how the PDF exported file has to be shaped. Here are the options supported for PDF export.

Property	Type	Description
author	String	Author of PDF Document
creator	String	Creator of PDF Document. Defaults to “Kendo UI PDF Generator”
Date	Date	Date when PDF Document was created. Defaults to current date
fileName	String	Name of the exported PDF Document
keywords	String	Keywords of exported PDF Document
landscape	Boolean	Paper dimension setting. Default is false
margin	Object	Specify margins of the page
paperSize	String	Specify paper size of PDF Document. e.g. A4, A3 etc
subject	String	Specify subject of the PDF Document
title	String	Specify title of PDF Document

Here is the code snippet on how to set the PDF options

<script>
    $("#grid").kendoGrid({
        tooldbar: [“pdf”],
        pdf: {
            author: "Dhananjay Tathe",
            creator: "Saviant Consulting",
            date: new Date(),
            fileName: "Your File Name.pdf",
            keywords: "keywords",
            landscape: false,
            margin: {
                left: 10,
                right: "10pt",
                top: "10mm",
                bottom: "1in"
            },
            paperSize: "A4",
            subject: "PDF subject",
            title: "PDF title"
        },
    });
</script>