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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144061 Apr 16,2019 12:43 PM UTC Apr 17,2019 07:18 AM UTC Angular - EJ 2 4
loading
Tags: Grid
Shounak
Asked On April 16, 2019 12:43 PM UTC

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 [Syncfusion]
Replied On April 16, 2019 12:59 PM UTC

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. 


Shounak
Replied On April 16, 2019 01:14 PM UTC

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

Shounak
Replied On April 16, 2019 01:28 PM UTC

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


Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 17, 2019 07:18 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon