自定義Kendo Grid中的數據pdf導出

Question

我使用Kendo Grid的內置功能來導出pdf格式的網格數據和excel http://demos.telerik.com/kendo-ui/grid/pdf-export。它對我來說工作得很好。我想定製導出的數據，即添加一些額外的列並刪除一些網格列。有什麼方法可以使用模板或其他功能來自定義導出數據。

在此先感謝。

Answer 1

你有兩個選擇：

1. 定義與要導出爲PDF當問及出口實際上出口的第二列第二格。兩個網格應共享數據源，以便過濾，將會共享訂單...。
2. 攔截pdfExport在生成PDF之前觸發的事件，並使用showColumn和hideColumn方法隱藏/顯示列。

以下代碼顯示了第二種方法（儘管我個人喜歡首先）。在點擊導出按鈕之前，您會看到EmployeeID，但PDF不包含此列，但包含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>