In my last blog post, we looked at a new feature of Kendo UI Grid released as part of our Q3 2014 – namely Export to Excel. Exporting data from Data Grid was a high ask feature and we provided that in our latest release of the product. In this blog post we will look at how to export the data grid contents to PDF. Kendo UI Data Grid support exporting to PDF out of the box. So let’s start looking at some code.
Creating a Grid:
As usual let’s build a simple grid. I will make use of our Northwind service available on our demo server as a data source to the grid. Here is the code snippet:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 7
},
sortable: true,
pageable: true,
columns: [
{ width: 300, field: "ProductName", title: "Product Name" },
{ field: "UnitsOnOrder", title: "Units On Order" },
{ field: "UnitsInStock", title: "Units In Stock" }
]
});
</script>
This will produce the following grid:
Kendo UI Grid
Providing Export Option on the Grid:
As seen in my previous blog post on Excel Export, for PDF also we have a command bar option available out of the box. We just have to add a toolbar command named “pdf”. This will provide an “Export to PDF” on the grid toolbar and clicking which will export the Grid to PDF. Here is the code snippet:
<script>
$("#grid").kendoGrid({
tooldbar:[“pdf”]
….
//code omitted for brevity
});
</script>
And here is the snapshot of how our grid will look like now:
Kendo UI Grid with Export button
If we now click on the “Export to PDF” we will get the Grid exported to a PDF document and the PDF will be saved to your system. Here is a snapshot of the PDF file itself:
PDF Document
Well that’s all it takes to export your Grid data to PDF.
Customizing the Exported PDF File:
Kendo UI Grid also provides certain options which can be set on the grid itself and these options will 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:"Lohith G N",
creator:"Telerik India",
date:new Date(),
fileName:"NorthwindProducts.pdf",
keywords:"northwind products",
landscape:false,
margin:{
left: 10,
right: "10pt",
top: "10mm",
bottom: "1in"
},
paperSize:"A4",
subject:"Northwind Products",
title:"Northwind Products"
},
….
//code omitted for brevity
});
</script>
Programmatically Export to PDF:
Toolbar option to provide an export option is great. It lets you add export feature without much of you doing any coding. But what if you have a situation where you want to 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 instance of the grid at runtime and invoke the method “saveAsPDF()” to start the export. That’s as 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();
}
});
//code omitted for brevity
</script>
That’s all its there to exporting the data grid to a PDF document. Do give it a try and let us know if you have any suggestion/feedback on this feature.
All the code in this blog post can be accessed on our Kendo UI DoJo here: http://dojo.telerik.com/@kashyapa/ADUVi
March is an action packed months for all of us.
Helping Ninja Technologists 