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

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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.

Reply | Reply with quote

Shounak

Replied On April 16, 2019 01:28 PM UTC

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

Reply | Reply with quote

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.

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.

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US