Border-top issue when exports data to Excel file

Question

I didn’t find any solutions about how to display the border-top only when exports data to Excel file.

What can I do to fulfill this feature?

https://stackblitz.com/edit/angular-3fhgjt?file=app.component.ts

Thiyagu Subramani · Answer

Hi techlandandyzhang, 
  
Thanks for contacting Syncfusion support. 
  
Based on your shared information we suspect that you want to display the border-top ( headers ) only when exports data to Excel file. To achieve this requirement, we suggest you to define borders color as white (#ffffff') for record’s theme excelExportProperties as below code example. Please refer to the below code and sample link. 
  




toolbarClick(args: ClickEventArgs): void { 
    if (args.item.id === 'Grid_excelexport') {  
        const excelExportProperties: any = { 
            theme: 
                { 
                    header: { borders: {} }, 
                    record: {  borders: { color : '#ffffff'} }, 
                } 
        }; 
        this.grid.excelExport(excelExportProperties); 
    } 
  } 
  
API Link:  https://ej2.syncfusion.com/angular/documentation/api/grid/excelExportProperties/#theme  
  
              : https://ej2.syncfusion.com/angular/documentation/api/grid/excelTheme/#header 
  
              : https://ej2.syncfusion.com/angular/documentation/api/grid/excelStyle/#borders 
             : https://ej2.syncfusion.com/angular/documentation/api/grid/border/ 
  
UG:  https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/#theme 
  
Sample link:  https://stackblitz.com/edit/angular-3fhgjt-ms5kvk?file=app.component.ts 
  
Please get back to us, if you need any further assistance. 
  
Regards, 
Thiyagu S

techlandandyzhang · Answer

This is our report format. I need to display top lines on total, and the same effect will be achieved when exporting to excel.

Ajith Govarthan · Answer

Hi techlandandyzhang, 
  
Thanks for the update. 
  
Query: This is our report format. I need to display top lines on total, and the same effect will be achieved when exporting to excel. 
  
We checked the attached screenshot and before we proceed with your query please share the below details to provide you the prompt solution at the earliest. 
  

Have you used Grouping in your Grid application?
  

Do you want to show the top lines for each group footer aggregates?
  

Please let us know that you want to show the top lines only for last six columns as shown in the screenshot.
  

Do you want to show toplines only for excel exported Grid ?  
  
Regards, 
Ajith G.

techlandandyzhang · Answer

I’ve captured a new screenshot and it is what I want to get with same effect when I export the data to an Excel file, please find where the top lines they position.

1. Have you used Grouping in your Grid application?

A: No, I didn’t use the Grouping function.

2. Do you want to show the top lines for each group footer aggregates?

A: The top lines need to be drawn for the rows showing the “Sub-total”, however, it doesn’t appear in the entire row, instead, it can be incontinuous (please see the column “A/C Code”, there is no top lines).

3. Please let us know that you want to show the top lines only for last six columns as shown in the screenshot.

A: No, usually, the top lines need be drawn cross the columns which get involved for sub-totals, grand total.

4. Do you want to show top lines only for excel exported Grid ?

A: No, I want to the top lines drawn in the Grid can exactly apply to the Excel exported as well.

Ajith Govarthan · Answer

Hi techlandandyzhang, 
  
Thanks for the update. 
  
Based on your update you have mentioned that you have not used the grouping in your Grid application. By default, in EJ2 Grid,  it is not feasible to add the aggregates in between data rows of the Grid component without using the grouping with group footer aggregates and if you use the grid footer aggregates, then the aggregates are displayed at the bottom of the Grid rows only. 
  
So, it is not feasible to achieve your requirement as per the attached screenshot. However, based on your attached screenshot we suspect that you have used TreeGrid in your application. So please confirm that you have used the TreeGrid in your application, based on that we will validate further on your requirement. Please refer the below TreeGrid documentation for your reference. 
  
UG & SB Links: 
https://ej2.syncfusion.com/angular/demos/#/material/treegrid/localdata 
https://ej2.syncfusion.com/angular/documentation/treegrid/getting-started/ 
  
regards, 
Ajith G.