New to Telerik UI for ASP.NET Core? Download free 30-day trial

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.
    @(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"))
        )
    )
    <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

See Also

In this article