Exporting Grid Data to Excel with Row and Cell Styling

Updated on Sep 4, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

How can you preserve the Grid UI styles when you export the Grid to Excel? By default, the Grid does not transfer conditional styles that you apply with the rowClass property or cell templates.

This KB also answers the following questions:

• How do I preserve custom Grid row styles in an Excel export?
• How do I customize workbook cells in the Grid excelExport event?
• Why are Grid row and cell template styles missing from the exported Excel file?

Solution

Handle the excelExport event to style the workbook before the Grid saves it. Read the exported cell values and apply the same conditions as the Grid rowClass callback.

The following example demonstrates how to apply conditional row and cell styles to the exported workbook.

Loading ...

To implement row and cell styling in the Excel export, follow these steps:

1. Define a row-class callback that receives RowClassArgs. Set ViewEncapsulation.None when the classes are in component styles so they reach the Grid rows.

   TS

   import { RowClassArgs } from '@progress/kendo-angular-grid';
   import { ViewEncapsulation } from '@angular/core';
   
   @Component({
       encapsulation: ViewEncapsulation.None
   })
   export class AppComponent {
       public rowClass = ({ dataItem }: RowClassArgs): string =>
           dataItem.type === 'BUG' ? 'bug-row' :
           dataItem.type === 'PROGRAM' ? 'program-row' : '';
   }

2. Bind rowClass and excelExport to the Grid. Add the kendoGridExcelCommand directive and kendo-grid-excel.

   html

   <kendo-grid id="work-items-grid" [kendoGridBinding]="gridData"
       [rowClass]="rowClass" (excelExport)="onExcelExport($event)">
       <ng-template kendoGridToolbarTemplate>
           <button type="button" kendoGridExcelCommand>Export to Excel</button>
       </ng-template>
       <kendo-grid-excel fileName="Grid-Styling.xlsx"></kendo-grid-excel>
   </kendo-grid>

3. In the export handler, use the ExcelExportEvent to access the WorkbookSheetRow objects. Find the Type and Status columns, then set WorkbookSheetRowCell properties. The workbook stores exported cell values in its rows.

   TS

   public onExcelExport(e: ExcelExportEvent): void {
       const rows = e.workbook.sheets[0].rows;
       const header = rows.find((row) => row.type === 'header');
       const typeIndex = header.cells.findIndex((cell) => cell.value === 'Type');
       const statusIndex = header.cells.findIndex((cell) => cell.value === 'Status');
   
       rows.filter((row) => row.type === 'data').forEach((row) => {
           const type = row.cells[typeIndex].value;
           const style = type === 'BUG' ? { background: '#f2dede', color: '#a94442' } :
               type === 'PROGRAM' ? { background: '#d9edf7', color: '#31708f' } : null;
   
           if (style) {
               row.cells.forEach((cell) => Object.assign(cell, style));
           }
   
           if (row.cells[statusIndex]?.value === 'Blocked') {
               row.cells[statusIndex].bold = true;
               row.cells[statusIndex].color = '#c62828';
           }
       });
   }

4. Add the matching CSS classes for the Grid rows. Scope the selectors to the Grid ID so the conditional styles override the Grid's alternating-row styles without !important.

   css

   #work-items-grid tr.bug-row {
       background-color: var(--kendo-color-error-subtle);
       color: var(--kendo-color-error-on-subtle);
   }
   
   #work-items-grid tr.program-row {
       background-color: var(--kendo-color-info-subtle);
       color: var(--kendo-color-info-on-subtle);
   }

See Also

• Grid Excel Export
• Customizing Generated Workbooks
• GridComponent
• WorkbookSheetRowCell