Set the Colors for Alternating Grid Rows
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Preferred Language | JavaScript |
Description
How can I customize the Excel document that the Data 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>