Export to Excel in ejs grid on click of a button outside the table

[Shounak]

I have a ejs grid and I  want to implement the export to excel function, on click of a button outside the ejs grid.

How to get the table data on click of button outside grid. And how to implement the export to excel function. Kindly help

[Thavasianand Sankaranarayanan]

Hi Shounak, 

Greetings from Syncfusion support. 

We can achieve your requirement using the excelExport method of Grid. 

Refer the below code example. 

[app.component.html] 

<button ejs-button (click)="btnClicked()">ExcelExport</button> 

 

<ejs-grid #grid [dataSource]='data' allowPaging='true' 

          [allowExcelExport]='true'> 

    <e-columns> 

        <e-column field='OrderID' headerText='Order ID' width='120' textAlign='Right' isPrimaryKey='true'></e-column> 

        <e-column field='OrderDate' headerText='Order Date' width='130' format="yMd" textAlign='Right'></e-column> 

        <e-column field='CustomerID' headerText='Customer ID' width='120'></e-column> 

        <e-column field='Freight' headerText='Freight' [allowGrouping]="false" width='120' format='C2' textAlign='Right'></e-column> 

        <e-column field='ShipCountry' headerText='Ship Country' width='150'></e-column> 

    </e-columns> 

</ejs-grid> 

------------------------------------------------------------------------------------------------------------------------- 

[app.component.ts] 

export class AppComponent { 

    public data: Object[]; 

 

@ViewChild('grid') 

    public grid: GridComponent; 

 

    public ngOnInit(): void { 

        this.data = orderDetails; 

 

    } 

 

    btnClicked(args): void { 

         

        this.grid.excelExport(); 

    } 

} 

We have prepared a simple sample in the following stackblitz link. 

Link: https://stackblitz.com/edit/angular-pzlqnc?file=app.component.ts 

Refer the help documentation 

Link: https://ej2.syncfusion.com/angular/documentation/api/grid/#excelexport 

Link: https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/?no-cache=1 

Regards, 

Thavasianand S. 

[Shounak]

This is not working. And is it possible without a ejs button, like from a image. Kindly help to make this work.

[Shounak]

How can i change the name of the export to excel file

[Thavasianand Sankaranarayanan]

Hi Shounak, 

 

Thanks for your update. 

 

Query 1: Is it possible without a ejs button, like from an image. 

 

By clicking an image we start the excel exporting for Grid. 

 

Refer the below code example. 

 

[app.component.html] 

 

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" style="width: 50px; 

    height: 50px;" (click)="btnClicked()"> 

<ejs-grid #grid [dataSource]='data' allowPaging='true' 

          [allowExcelExport]='true'> 

    <e-columns> 

 

          ----- 

 

    </e-columns> 

</ejs-grid> 

--------------------------------------------------------------------------- 

[app.component.ts] 

 

export class AppComponent { 

    public data: Object[]; 

 

@ViewChild('grid') 

    public grid: GridComponent; 

 

    public ngOnInit(): void { 

        this.data = orderDetails; 

 

    } 

 

    btnClicked(args): void { 

         const excelExportProperties: ExcelExportProperties = { 

                fileName: 'new.xlsx' 

            }; 

        this.grid.excelExport(excelExportProperties); 

    } 

} 

 

 

Query 2: How can i change the name of the export to excel file 

 

We have already discuss about the query in the following documentation. 

 

Link: https://ej2.syncfusion.com/angular/documentation/grid/excel-exporting/?no-cache=1#file-name-for-exported-document 

We have modified sample with both query solution in the following stackblitz link. 

Link: https://stackblitz.com/edit/angular-pzlqnc?file=app.component.ts 

 

Regards, 

Thavasianand S.