Post
Ask Question

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.
  1. <script>  
  2.     $(document).ready(function() {  
  3.         $("#grid").kendoGrid({  
  4.             toolbar: ["pdf"],  
  5.             pdf: {  
  6.                 allPages: true,  
  7.                 avoidLinks: true,  
  8.                 paperSize: "A4",  
  9.                 margin: {  
  10.                     top: "2cm",  
  11.                     left: "1cm",  
  12.                     right: "1cm",  
  13.                     bottom: "1cm"  
  14.                 },  
  15.                 landscape: true,  
  16.                 repeatHeaders: true,  
  17.                 template: $("#page-template").html(),  
  18.                 scale: 0.8  
  19.             },  
  20.             dataSource: {  
  21.                 type: "odata",  
  22.                 transport: {  
  23.                     read: //call data source method   
  24.                 },  
  25.                 pageSize: 20  
  26.             },  
  27.             height: 550,  
  28.             sortable: true,  
  29.             pageable: {  
  30.                 refresh: true,  
  31.                 pageSizes: true,  
  32.                 buttonCount: 5  
  33.             },  
  34.             columns: [{  
  35.                 field: "ID",  
  36.                 title: "ID",  
  37.                 hidden: false  
  38.             }, {  
  39.                 field: "Name",  
  40.                 title: "Name",  
  41.                 hidden: false  
  42.             }, {  
  43.                 field: "DOB",  
  44.                 title = "Date Of Birth",  
  45.                 width: 150,  
  46.                 hidden: true  
  47.             }]  
  48.         });  
  49.     });  
  50. </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.
  1. <div id="grid"></div> <br> <button id="btnExport">Export to PDF</button>  
  2. <script>  
  3.     $("#btnExport").kendoButton({  
  4.         click: function() {  
  5.             $("#grid").data("kendoGrid").saveAsPDF();  
  6.         }  
  7.     });  
  8. </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

  1. <script>  
  2.     $("#grid").kendoGrid({  
  3.         tooldbar: [“pdf”],  
  4.         pdf: {  
  5.             author: "Dhananjay Tathe",  
  6.             creator: "Saviant Consulting",  
  7.             date: new Date(),  
  8.             fileName: "Your File Name.pdf",  
  9.             keywords: "keywords",  
  10.             landscape: false,  
  11.             margin: {  
  12.                 left: 10,  
  13.                 right: "10pt",  
  14.                 top: "10mm",  
  15.                 bottom: "1in"  
  16.             },  
  17.             paperSize: "A4",  
  18.             subject: "PDF subject",  
  19.             title: "PDF title"  
  20.         },  
  21.     });  
  22. </script>