Configure Color for Alternating Rows

Environment

Product Progress Kendo UI Grid for jQuery
Preferred Language JavaScript

Description

How can I customize the Excel document that the Grid generates during exporting?

Solution

To set the background color of the alternating rows, the demo uses the background option of the cell. For more information on how Excel documents work, refer to the introductory help topic on Excel.

The following example demonstrates how to customize the Excel document that the Grid generates during exporting.

<div id="grid"></div>
<script>
    $("#grid").kendoGrid({
        toolbar: ["excel"],
        excelExport: function(e) {
          var sheet = e.workbook.sheets[0];
          for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
            if (rowIndex % 2 == 0) {
              var row = sheet.rows[rowIndex];
              for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex ++) {
                row.cells[cellIndex].background = "#aabbcc";
              }
            }
          }
        },
        dataSource: {
          type: "odata",
          transport: {
              read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
          },
          pageSize: 7
        },
        pageable: true,
        columns: [
            { width: 300, field: "ProductName", title: "Product Name" },
            { width: 300, field: "UnitPrice", title: "Unit Price" },
            { field: "UnitsOnOrder", title: "Units On Order" },
            { field: "UnitsInStock", title: "Units In Stock" }
        ]
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article