Настройте данные в экспорт 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>