Customize the data in Kendo Grid pdf export

Question

I am using the built in functionality of Kendo Grid to export the grid data in pdf and excel http://demos.telerik.com/kendo-ui/grid/pdf-export. It is working fine for me. I want to customize the data that is exported i.e. add some additional columns and remove some of the columns of grid. Is there any way to customize the export data using templates or some other feature.

Thanks in advance.

OnaBai OnaBai · Accepted Answer · 2015-01-21T10:38:28

You have two options:

Define a second grid with the columns that you want to export to PDF and when asked to export actually export the second. Both grids should share the datasource so filtering, orders... will be shared.
Intercept pdfExport event that is fired before the PDF is generated and hide/show the columns using showColumn and hideColumn methods.

The following code shows second approach (despite I -personally- prefer first). You will see that before clicking on export button you see EmployeeID but the PDF does not contain this column but includes Country.

$(document).ready(function() {
  kendo.pdf.defineFont({
    "DejaVu Sans"             : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans.ttf",
    "DejaVu Sans|Bold"        : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
    "DejaVu Sans|Bold|Italic" : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
    "DejaVu Sans|Italic"      : "http://cdn.kendostatic.com/2014.3.1314/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
  });
  
  var grid = $("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
      fileName: "Kendo UI Grid Export.pdf",
      proxyURL: "http://demos.telerik.com/kendo-ui/service/export"
    },
    dataSource: {
      type: "odata",
      transport: {
        read: {
          url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
        }
      }
    },
    columns: [
      { 
        title: "Photo", 
        width: 140, 
        template :'<img src="http://demos.telerik.com/kendo-ui/content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />'
      },
      { field: "FirstName" },
      { field: "LastName" },
      { field: "Country", hidden: true },
      { field: "EmployeeID" }
    ],
    scrollable: false,
    pdfExport: function(e) {
      grid.showColumn(3);            
      grid.hideColumn(4);            
    }
  }).data("kendoGrid");
});

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/pako_deflate.min.js"></script>

<div id="grid"></div>

Customize the data in Kendo Grid pdf export

1 Answers