自定义 Kendo Grid pdf 导出中的数据 [英] Customize the data in Kendo Grid pdf export

问题描述

我正在使用 Kendo Grid 的内置功能将网格数据导出为 pdf 和 excel http://demos.telerik.com/kendo-ui/grid/pdf-export.它对我来说很好用.我想自定义导出的数据，即添加一些额外的列并删除一些网格列.有什么方法可以使用模板或其他一些功能自定义导出数据.

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.

提前致谢.

推荐答案

您有两个选择:

1. 使用要导出为 PDF 的列定义第二个网格，并在要求导出时实际导出第二个网格.两个网格都应该共享数据源，因此过滤、订单...将被共享.
2. 拦截在生成 PDF 之前触发的 pdfExport 事件，并使用 showColumn 和 hideColumn 方法隐藏/显示列.

1. 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.
2. Intercept pdfExport event that is fired before the PDF is generated and hide/show the columns using showColumn and hideColumn methods.

以下代码显示了第二种方法(尽管我个人更喜欢第一种).您会看到，在单击导出按钮之前，您会看到 EmployeeID，但 PDF 不包含此列，但包含 Country.

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>

这篇关于自定义 Kendo Grid pdf 导出中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！