|
| 1 | +--- |
| 2 | +title: Setting Pattern Style and Color for Cells in Excel Export with Kendo UI Grid |
| 3 | +description: Learn how to customize the pattern style and color of cells when exporting data from the Kendo UI Grid to an Excel file using jQuery. |
| 4 | +type: how-to |
| 5 | +page_title: How to Set Pattern Style and Color in Excel Export - Kendo UI Grid |
| 6 | +slug: set-pattern-style-color-excel-export-kendo-ui-grid |
| 7 | +tags: kendo-ui, grid, excel-export, pattern-style, color |
| 8 | +res_type: kb |
| 9 | +ticketid: 1651731 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | + |
| 14 | +| Product | Kendo UI for jQuery Grid | |
| 15 | +| --- | --- | |
| 16 | +| Version | Current | |
| 17 | + |
| 18 | +## Description |
| 19 | + |
| 20 | +When exporting data from the [Grid for Progress® Kendo UI®](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid) 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? |
| 21 | + |
| 22 | +This KB article also answers the following questions: |
| 23 | +- How to apply conditional styling to cells in an Excel export? |
| 24 | +- How to set the background color for specific cells in Excel files generated from the Kendo UI Grid? |
| 25 | +- How to use the excelExport event to customize the appearance of cells in exported Excel files? |
| 26 | + |
| 27 | +## Solution |
| 28 | + |
| 29 | +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. |
| 30 | + |
| 31 | +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". |
| 32 | + |
| 33 | +```javascript |
| 34 | +$("#grid").kendoGrid({ |
| 35 | + excelExport: function(e) { |
| 36 | + e.workbook.sheets[0].rows.forEach(row => { |
| 37 | + row.cells.forEach(cell => { |
| 38 | + // Apply background color to cells with 'Alice Mutton' |
| 39 | + if(cell.value && typeof cell.value == "string" && cell.value === "Alice Mutton"){ |
| 40 | + cell.background = "#FF0000"; |
| 41 | + } |
| 42 | + }); |
| 43 | + }); |
| 44 | + } |
| 45 | +}); |
| 46 | +``` |
| 47 | + |
| 48 | +For a live demonstration, refer to this Dojo demo: [https://dojo.telerik.com/IxAraqaz](https://dojo.telerik.com/IxAraqaz). |
| 49 | + |
| 50 | +## See Also |
| 51 | + |
| 52 | +- [Grid excelExport Event Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/excelexport) |
| 53 | +- [Workbook sheets.rows.cells.background Configuration](https://docs.telerik.com/kendo-ui/api/javascript/ooxml/workbook/configuration/sheets.rows.cells.background) |
0 commit comments