Setting Pattern Style and Color for Cells in Excel Export with Kendo UI Grid
Environment
| Product | Kendo UI for jQuery Grid |
|---|---|
| Version | Current |
Description
When exporting data from the Grid for Progress® Kendo UI® to an Excel file using jQuery, I need to set the pattern color and style of a cell. How can I customize the background color of cells based on their values or other conditions?
This KB article also answers the following questions:
- How to apply conditional styling to cells in an Excel export?
- How to set the background color for specific cells in Excel files generated from the Kendo UI Grid?
- How to use the excelExport event to customize the appearance of cells in exported Excel files?
Solution
To customize the background color of cells in the exported Excel file, you need to handle the excelExport event of the Kendo UI Grid. In the event handler, modify the e.workbook object to apply the desired styles.
Use the sheets.rows.cells.background configuration to set the background color of cells. Below is an example where the background color is set to red (#FF0000) for cells containing the value "Alice Mutton".
$("#grid").kendoGrid({
excelExport: function(e) {
e.workbook.sheets[0].rows.forEach(row => {
row.cells.forEach(cell => {
// Apply background color to cells with 'Alice Mutton'
if(cell.value && typeof cell.value == "string" && cell.value === "Alice Mutton"){
cell.background = "#FF0000";
}
});
});
}
});
For a live demonstration, refer to this Dojo demo: https://dojo.telerik.com/IxAraqaz.