New to Kendo UI for jQuery? Download free 30-day trial

Use Column Templates in the Grid

Environment

Product Progress® Kendo UI® Grid for jQuery
Operating System Windows 10 64bit
Preferred Language JavaScript

Description

How can I use a column template as the value of a corresponding cell in the Excel document while exporting the Kendo UI Grid for jQuery?

Solution

The following example demonstrates how to use the column template as the value of a corresponding cell in the Excel document while exporting the Grid.

For more information on how Excel documents work, refer to the introductory help topic on Excel.

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  toolbar: ["excel"],
  columns: [
    { field: "ProductName", title: "Product Name" },
    { field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
  ],
  pageable: true,
  dataSource: {
    transport: {
      read: {
        url: "https://demos.telerik.com/kendo-ui/service/products",
        dataType: "jsonp"
      }
    },
    pageSize: 10
  },
  excelExport: function(e) {
    var sheet = e.workbook.sheets[0];
    var template = kendo.template(this.columns[1].template);

    for (var i = 1; i < sheet.rows.length; i++) {
      var row = sheet.rows[i];

      var dataItem = {
         UnitPrice: row.cells[1].value
      };

      row.cells[1].value = template(dataItem);
    }
  }
});
</script>

See Also

In this article