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.
- Handle the
ExcelExportevent of the Grid. - Get the Workbook sheet and loop through the array of the sheet rows.
- Loop through the cells of the even rows.
- 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.