Coloring the Alternating Rows of a Grid Exported to Excel

Environment

Product Version	2022.2.621
Product	Grid for ASP.NET Core

Description

How can I set the background color of the alternating rows of an exported Grid to Excel when working with Telerik UI for ASP.NET Core?

Solution

Use the background option of the Workbook cell to set the background color of the alternating table rows.

1. Handle the ExcelExport event of the Grid.
2. Get the Workbook sheet and loop through the array of the sheet rows.
3. Loop through the cells of the even rows.
4. Specify the desired background color.

Index.cshtml

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice);
            columns.Bound(p => p.UnitsOnOrder);
            columns.Bound(p => p.UnitsInStock);
        })
        .Events(e => e.ExcelExport("excelExport"))
        .ToolBar(tools => tools.Excel())
        .Pageable()
        .Sortable()
        .Scrollable()
        .Groupable()
        .Excel(excel => excel
            .FileName("Kendo UI Grid Export.xlsx")
            .Filterable(true)
        )
        .Reorderable(r => r.Columns(true))
        .Resizable(r => r.Columns(true))
        .ColumnMenu()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Excel_Export_Read", "Grid"))
        )
    )

JavaScript

    <script>
        function excelExport(e) {
            var sheet = e.workbook.sheets[0]; //Workbook sheet.
            for (var rowIndex = 1; rowIndex < sheet.rows.length; rowIndex++) {
                if (rowIndex % 2 == 0) { //Check if the row index is even.
                    var row = sheet.rows[rowIndex];
                    for (var cellIndex = 0; cellIndex < row.cells.length; cellIndex++) { //Loop through the row cells.
                        row.cells[cellIndex].background = "#aabbcc"; //Set the cell background color.
                    }
                }
            }
        }
    </script>

Refer to this REPL for a runnable example.

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Coloring the Alternating Rows of a Grid Exported to Excel
• Exporting to Excel (Overview)
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base