We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

4 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 16, 2019 07:59 AM

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. 


Refer the help documentation 


Regards, 
Thavasianand S. 



SH Shounak April 16, 2019 08:14 AM

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


SH Shounak April 16, 2019 08:28 AM

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



TS Thavasianand Sankaranarayanan Syncfusion Team April 17, 2019 02:18 AM

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. 
 

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

 
Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon