Excel export with breaking header into two lines

Question

Hi all,I want to break header text into two line when excel export is called. I'm using following method for break line, but it is not working. (
tag added when the grid header loading and it works for grid)excelHeaderQueryCellInfo(args: ExcelHeaderQueryCellInfoEventArgs) { let readingCell = args.cell as ReadingCell; readingCell.value = readingCell.value.replace("
", " "); }

Balaji Sekar · Answer

Hi Neo, Greetings from Syncfusion. Query: I want to break header text into two line when excel export is called. By default to break the text into two lines you need to use wrapText property for the particular cell in the excel export. We have prepared sample in that we have used the excelHeaderQueryCellInfo event. Which will be triggered when header cells are created. In that event we have added wrapText as true property in the style argument of the event. And we have also split the header text based on the white space and joined them by concatenating them with “ ”, hence it wraps the combined text in the new line in the excel document. We have shared the sample for your reference. App.component.html

App.component.ts excelHeader(args: any): void { let header = args.cell.value.split(' '); args.cell.value = header.length === 2 ? header[0] + " " + header[1]: args.cell.value; args.style.wrapText = true; } Sample Link: https://stackblitz.com/edit/angular-ecdrhy-ggxv7a?file=app.component.ts Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#excelheaderquerycellinfo Please get back to us if you need further assistance. Regards, Balaji Sekar.

Neo · Answer

Hi Neo, 
 
Greetings from Syncfusion. 
 
Query: I want to break header text into two line when excel export is called. 
 
By default to break the text into two lines you need to use wrapText property for the particular cell in the excel export. We have prepared sample in that we have used the excelHeaderQueryCellInfo  event. Which will be triggered when header cells are created. In that event we have added wrapText as true property in the style argument of the event. And we have also split  the header text based on the white space and joined them by concatenating them with “
”, hence it wraps the combined text in the new line in the excel document. We have shared the sample for your reference.

App.component.html

(excelHeaderQueryCellInfo)='excelHeader($event)'>

App.component.ts 
 
    excelHeader(args: any): void { 
      let header = args.cell.value.split(' '); 
      args.cell.value = header.length === 2 ? header[0] + "
" + header[1]: args.cell.value; 
      args.style.wrapText =  true; 
    } 
 
Sample Link: https://stackblitz.com/edit/angular-ecdrhy-ggxv7a?file=app.component.ts 
 
Documentation Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#excelheaderquerycellinfo 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. Hi,It's working. Thank you very much. Could you please advise, how to add cell boarder with color? and want to add new row to bottom of the excel rows and filling color to indicate last row.

Dhivya Rajendran · Answer

Hi Neo, 

Thanks for your update. 

Query #1: add new row to bottom of the excel rows and filling color to indicate last row. 

We have validated your query and prepared sample based on your requirement. In that we have used the dataSource property to add a blank row at the end of the content rows. We have used the grid dataSource for the excelExport also and pushed an empty row in the excelExport dataSource. So which will  export a blank row at the end of the content rows. You can Add background color for each cells using the backColor property in the excelQueryCellInfo event. 

Code Snippet:  




App.component.ts     
toolbarClick(args: ClickEventArgs): void { 
      switch (args.item.text) { 
        case 'Excel Export': 
          let excelExportProperties: any = { 
            dataSource: orderDetails.slice(0,2) 
          }; 
          excelExportProperties.dataSource.push({"":""}); 
          this.grid.excelExport(excelExportProperties); 
          break; 
      } 
    } 

    excelContent(args: any):void{ 
      debugger; 
      if(Object.keys(args.data).length === 1) { 
        args.style = { backColor: '#ff704d' }; 
      } 
} 


Sample Link: https://stackblitz.com/edit/angular-ecdrhy-kpyo1v?file=app.component.ts 

Query#2: how to add cell border with color?. 

Currently, we don’t  have option to set the border color for the cell so we have confirmed it is bug and logged defect “cell border color is not working properly in excelExport” report for the same. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming weekly release which is expected to be rolled out on March 11, 2020. 
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
Feedback Link : https://www.syncfusion.com/feedback/12296/cell-border-color-is-not-working-properly-in-excelexport 
 
Until then we appreciate your patience. 

Regards, 
R.Dhivya