Conditional Formatting of cells in kendo grid export to excel in angular 2+

2 Answers 1134 Views

Excel Export Grid

2 Answers, 1 is accepted

kaustubh

commented on 06 Oct 2021, 02:04 PM | edited

Thanks Martin for replying, but I should have asked my question more specifically.

I am trying to apply formatting to the excel cells (both data cells and footer cells) using the cellOptions, footerCellOptions and groupFooterCellOptions. Although the formatting works fine with dataCells, it doesn't gets applied to footerCells.

In my project we have complex template for the footer, I thought that might be the reason its not working, but I created a simple sample project to show what I am trying to achieve.

https://stackblitz.com/edit/angular-qarfdv?file=app%2Fapp.component.ts

https://angular-qarfdv.stackblitz.io

it can be seen here that the dataCells having negative values are getting formatted, but footerCells are not

Although the formula does gets applied, but it shows an error in the cell. ( if you double click on the cell and click out it gets applied)

Appreciate your help

answered on 11 Oct 2021, 12:44 PM

Hi Kaustubh,

Thank you for the provided example.

Indeed the content in the kendoExcelExportFooterTemplate and kendoExcelExportGroupFooterTemplate is always exported as a string. That is why the custom format is not applied. This behavior is as expected because we cannot predict what the developer will define in the templates.

In this case, the template values need to be manually parsed to a number in excelExport handler:

  <kendo-grid ...(excelExport)="onExcelExport($event)">
   ...

  onExcelExport(e) {
    const rows = e.workbook.sheets[0].rows;
    rows.forEach((row) => {
      if (row.type === 'footer' || row.type === 'group-footer') {
        row.cells.forEach((cell, index) => {
          if (cell.value) {
            cell.value = Number(cell.value);
          }
        });
      }
    });
  }

Here is the updated example where the suggested approach is demonstrated:

https://stackblitz.com/edit/angular-qarfdv-i4eaia

I hope this helps.

Regards,
Martin
Progress Telerik