Edit this page

Configure Color for Alternating Rows

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

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.

<div id="grid"></div>
        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" }

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article