Post
Ask Question

Exporting Kendo SpreadSheet To PDF With Remote DataBinding

Introduction

 
In my last article I have explained how to do data binding in Kendo spreadsheets using ASP.NET Core WEB API services. Now, in this blog we are going to see how to implement the export to PDF functionality in Kendo spreadsheets.
 
Please go through my previous article before proceeding to this blog.
 

Kendo Spreadsheet

 
kendoSpreadSheet.html 
  1. <!DOCTYPE html>      
  2. <html>      
  3. <head>      
  4.       
  5.     <style>      
  6.         html {      
  7.             font-size: 14px;      
  8.             font-family: Arial, Helvetica, sans-serif;      
  9.         }      
  10.     </style>      
  11.     <title></title>      
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />      
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />      
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />      
  15.       
  16.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>      
  17.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>      
  18.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>      
  19.       
  20.       
  21. </head>      
  22. <body>      
  23.     <div id="example">      
  24.         <div class="box wide">      
  25.             <div class="box-col">      
  26.                 <h4>Save data changes</h4>      
  27.                 <ul class="options">      
  28.                     <li>      
  29.                         <button class="k-button" id="save">Save changes</button>      
  30.                         <button class="k-button" id="cancel">Cancel changes</button>      
  31.                     </li>      
  32.                 </ul>      
  33.             </div>      
  34.         </div>      
  35.       
  36.         <div id="spreadsheet" style="width: 100%"></div>      
  37.         <script>      
  38.             $(function () {      
  39.                 var dataSource = new kendo.data.DataSource({      
  40.                     transport: {      
  41.                         read: onRead,      
  42.                     },      
  43.                     schema: {      
  44.                         model: {      
  45.                             id: "ProductID",      
  46.                             fields: {      
  47.                                 productID: { type: "number" },      
  48.                                 productName: { type: "string" },      
  49.                                 price: { type: "number" },      
  50.                                 tax: { type: "number" }      
  51.                             }      
  52.                         }      
  53.                     }      
  54.                 });      
  55.       
  56.                 $("#spreadsheet").kendoSpreadsheet({      
  57.                     columns: 20,      
  58.                     rows: 100,      
  59.                     toolbar: false,      
  60.                     sheetsbar: false,      
  61.                     sheets: [{      
  62.                         name: "Products",      
  63.                         dataSource: dataSource,      
  64.                         rows: [{      
  65.                             height: 40,      
  66.                             cells: [      
  67.                                 {      
  68.                                     bold: "true",      
  69.                                     background: "#9c27b0",      
  70.                                     textAlign: "center",      
  71.                                     color: "white",      
  72.                                     title: "ID"      
  73.                                 }, {      
  74.                                     bold: "true",      
  75.                                     background: "#9c27b0",      
  76.                                     textAlign: "center",      
  77.                                     color: "white",      
  78.                                     title:"Product Name"      
  79.                                 }, {      
  80.                                     bold: "true",      
  81.                                     background: "#9c27b0",      
  82.                                     textAlign: "center",      
  83.                                     color: "white",      
  84.                                     title:"Price"      
  85.                                 }, {      
  86.                                     bold: "true",      
  87.                                     background: "#9c27b0",      
  88.                                     textAlign: "center",      
  89.                                     color: "white"      
  90.                                 }, ]      
  91.                         }],      
  92.                         columns: [      
  93.                             { width: 100 },      
  94.                             { width: 415 },      
  95.                             { width: 145 },      
  96.                             { width: 145 },      
  97.                             { width: 145 }      
  98.                         ]      
  99.                     }]      
  100.                 });      
  101.       
  102.                 function onRead(options) {      
  103.                     $.ajax({      
  104.                         url: "http://localhost:11207/api/Products/ProductDetails",      
  105.                         dataType: "json",      
  106.                         success: function (result) {      
  107.                             options.success(result);      
  108.                         },      
  109.                         error: function (result) {      
  110.                             options.error(result);      
  111.                         }      
  112.                     });      
  113.                 }      
  114.       
  115.                 
  116.         </script>      
  117.     </div>      
  118.       
  119.       
  120. </body>      
  121. </html>      
Export to PDF
 
saveAsPDF() function is used to implement the export to PDF functionality. 
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.       
  5.     <style>    
  6.         html {    
  7.             font-size: 14px;    
  8.             font-family: Arial, Helvetica, sans-serif;    
  9.         }    
  10.     </style>    
  11.     <title></title>    
  12.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" />    
  13.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" />    
  14.     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css" />    
  15.     
  16.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>    
  17.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>    
  18.     <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>    
  19.     
  20.     
  21. </head>    
  22. <body>    
  23.     <div id="example">    
  24.         <button id="exportPDF" class="k-button">Export to PDF</button>    
  25.     
  26.         <div id="spreadsheet" style="width: 100%"></div>    
  27.         <script>    
  28.     
  29.             $(function () {    
  30.                 var dataSource = new kendo.data.DataSource({    
  31.                     transport: {    
  32.                         read: onRead,    
  33.     
  34.                     },    
  35.                     schema: {    
  36.                         model: {    
  37.                             id: "ProductID",    
  38.                             fields: {    
  39.                                 productID: { type: "number" },    
  40.                                 productName: { type: "string" },    
  41.                                 price: { type: "number" },    
  42.                                 tax: { type: "number" }    
  43.                             }    
  44.                         }    
  45.                     }    
  46.                 });    
  47.     
  48.                 $("#spreadsheet").kendoSpreadsheet({    
  49.                     columns: 20,    
  50.                     rows: 100,    
  51.                     toolbar: false,    
  52.                     sheetsbar: false,    
  53.                     sheets: [{    
  54.                         name: "Products",    
  55.                         dataSource: dataSource,    
  56.                         filter: {    
  57.                             ref: "A1:D3",    
  58.                             columns: []    
  59.                         },    
  60.                         rows: [{    
  61.                             height: 40,    
  62.     
  63.                             cells: [    
  64.                                 {    
  65.                                     bold: "true",    
  66.                                     background: "#9c27b0",    
  67.                                     textAlign: "center",    
  68.                                     color: "white",    
  69.                                     title: "ID"    
  70.                                 }, {    
  71.                                     bold: "true",    
  72.                                     background: "#9c27b0",    
  73.                                     textAlign: "center",    
  74.                                     color: "white",    
  75.                                     title: "Product Name"    
  76.                                 }, {    
  77.                                     bold: "true",    
  78.                                     background: "#9c27b0",    
  79.                                     textAlign: "center",    
  80.                                     color: "white",    
  81.                                     title: "Price"    
  82.                                 }, {    
  83.                                     bold: "true",    
  84.                                     background: "#9c27b0",    
  85.                                     textAlign: "center",    
  86.                                     color: "white"    
  87.                                 },]    
  88.                         }],    
  89.                         columns: [    
  90.                             { width: 100 },    
  91.                             { width: 415 },    
  92.                             { width: 145 },    
  93.                             { width: 145 },    
  94.                             { width: 145 }    
  95.                         ]    
  96.                     }]    
  97.                 });    
  98.                   
  99.     
  100.                   
  101.     
  102.                 function onRead(options) {    
  103.                     $.ajax({    
  104.                         url: "http://localhost:11207/api/Products/ProductDetails",    
  105.                         dataType: "json",    
  106.                         success: function (result) {    
  107.                             options.success(result);    
  108.                         },    
  109.                         error: function (result) {    
  110.                             options.error(result);    
  111.                         }    
  112.                     });    
  113.                 }    
  114.     
  115.     
  116.             });    
  117.     
  118.             $("#exportPDF").on('click', function (e) {    
  119.                 exportPDF(e);    
  120.     
  121.             })    
  122.             function exportPDF(e) {    
  123.                 var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");    
  124.                 spreadsheet.saveAsPDF();    
  125.             }    
  126.                  
  127.         </script>    
  128.     </div>    
  129.     
  130.     
  131. </body>    
  132. </html>    
Run the application
Exporting Kendo SpreadSheet To PDF With Remote DataBinding
Figure 1
 
Clicking on the button Export to PDF will fire exportPDF functions; in this function saveAsPDF() is used to print the spreadsheet.
 
Exporting Kendo SpreadSheet To PDF With Remote DataBinding
Figure-2 Kendo spreadsheet exported as PDF  
 
The area property in the Kendo spreadsheet object is used to set the area to export; it holds a string value.
 
“workbook” - > export full workbook, including all sheets
“sheet” -> export current sheet
“selection”-> export only selected area.
  1. function exportPDF(e) {    
  2.                var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");    
  3.                spreadsheet.saveAsPDF({ area: "selection" });    
  4.            }    
From the above code you can notice I have given the area as selection, so it will print only the selected area from the spreadsheet.  
 
Exporting Kendo SpreadSheet To PDF With Remote DataBinding
Figure 3 
 
Exporting Kendo SpreadSheet To PDF With Remote DataBinding
Figure 4 
 
So, as per the program only selected fields' product ID and product Name is exported to PDF
 
Source Code - GitHub

Reference

https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet
 

Summary

 
We have seen how to export the Kendo spreadsheet to PDF and how to work with area property while exporting the content to PDF.
 
I hope you have enjoyed this article. Your valuable feedback, questions, or comments about this  are always welcomed.


Similar Articles