The excel export allows exporting Grid data to Excel document. You need to use the
excelExport
method for exporting. To enable Excel export in the grid, set the
allowExcelExport
as true.
To use excel export, inject ExcelExportService in the provider section of AppModule.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'
[allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.grid.excelExport();
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides an option to export multiple grid data in the same excel file.
The excel export provides support to export multiple grids in same sheet.
To export in same sheet, define multipleExport.type
as AppendToSheet in excelExportProperties
.
It have an option to provide blank rows between grids. These blank rows count can be defined by using the multipleExport.blankRows.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, employeeData } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<p><b>First Grid:</b></p>
<ejs-grid #grid1 id='FirstGrid' [dataSource]='fData' [toolbar]='toolbarOptions' [allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
<p><b>Second Grid:</b></p>
<ejs-grid #grid2 id='SecondGrid' [dataSource]='sData' [allowExcelExport]='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
`
})
export class AppComponent implements OnInit {
public fData: object[];
public sData: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid1') public fGrid: GridComponent;
@ViewChild('grid2') public sGrid: GridComponent;
ngOnInit(): void {
this.fData = data.slice(0, 5);
this.sData = employeeData.slice(0, 5);
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: { type: 'AppendToSheet', blankRows: 2 }
};
const firstGridExport: Promise<any> = this.fGrid.excelExport(appendExcelExportProperties, true);
firstGridExport.then((fData: any) => {
this.sGrid.excelExport(appendExcelExportProperties, false, fData);
});
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, multipleExport.blankRows value is 5.
Excel exporting provides support to export multiple grids in new sheet.
To export in new sheet, define multipleExport.type as NewSheet in excelExportProperties
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, employeeData } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<p><b>First Grid:</b></p>
<ejs-grid #grid1 id='FirstGrid' [dataSource]='fData' [toolbar]='toolbarOptions' [allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
<p><b>Second Grid:</b></p>
<ejs-grid #grid2 id='SecondGrid' [dataSource]='sData' [allowExcelExport]='true'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
`
})
export class AppComponent implements OnInit {
public fData: object[];
public sData: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid1') public fGrid: GridComponent;
@ViewChild('grid2') public sGrid: GridComponent;
ngOnInit(): void {
this.fData = data.slice(0, 5);
this.sData = employeeData.slice(0, 5);
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick = (args: ClickEventArgs) => {
if (args.item.id === 'FirstGrid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const appendExcelExportProperties: ExcelExportProperties = {
multipleExport: { type: 'NewSheet' }
};
const firstGridExport: Promise<any> = this.fGrid.excelExport(appendExcelExportProperties, true);
firstGridExport.then((fData: any) => {
this.sGrid.excelExport(appendExcelExportProperties, false, fData);
});
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides an option to customize mapping of the grid to excel document.
The excel export provides an option to export the current page into excel. To export current page, define exportType
to CurrentPage.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, PageService, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='220px'
[allowPaging]='true' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`,
providers: [PageService]
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
exportType: 'CurrentPage'
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides an option to export hidden columns of grid by defining includeHiddenColumn
as true.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'
[allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCountry' headerText='Ship Country' width=150 [visible]='false'></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can show a hidden column or hide a visible column while printing the grid using toolbarClick
and excelExportComplete
events.
In the toolbarClick
event, based on args.item.id as Grid_excelexport. We can show or hide columns by setting column.visible
property to true or false respectively.
In the excelExportComplete event, We have reversed the state back to the previous state.
In the below example, we have CustomerID as a hidden column in the grid. While exporting, we have changed CustomerID to visible column and ShipCity as hidden column.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ToolbarService, ExcelExportService, Column } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true'
(excelExportComplete)='excelExportComplete()' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' [visible]='false' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
(this.grid.columns[1] as Column).visible = true;
(this.grid.columns[3] as Column).visible = false;
this.grid.excelExport();
}
}
excelExportComplete(): void {
(this.grid.columns[1] as Column).visible = false;
(this.grid.columns[3] as Column).visible = true;
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Grid cells in the exported Excel can be customized or formatted using excelQueryCellInfo
event. In this event, we can format the grid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Freight column in the exported excel by args.cell and backColor property.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelQueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true'
(queryCellInfo)='queryCellInfo($event)' (excelQueryCellInfo)='excelQueryCellInfo($event)' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='Freight' headerText='Freight' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.grid.excelExport();
}
}
excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
if (args.column.field === 'Freight') {
if (args.value < 30) {
args.style = { backColor: '#99ffcc' };
} else if (args.value < 60) {
args.style = { backColor: '#ffffb3' };
} else {
args.style = { backColor: '#ff704d' };
}
}
}
queryCellInfo(args: any): void {
if (args.column.field === 'Freight') {
if (args.data[args.column.field] < 30) {
args.cell.bgColor = '#99ffcc';
} else if (args.data[args.column.field] < 60) {
args.cell.bgColor = '#ffffb3';
} else {
args.cell.bgColor = '#ff704d';
}
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides an option to include theme for exported excel document.
To apply theme in exported Excel, define the theme
in excelExportProperties
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
By default, material theme is applied to exported excel document.
The excel export provides an option to include header and footer content for exported excel document.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px' [allowExcelExport]='true'
(toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
header: {
headerRows: 7,
rows: [
{
cells: [{
colSpan: 4, value: 'Northwind Traders',
style: { fontColor: '#C67878', fontSize: 20, hAlign: 'Center', bold: true, }
}]
},
{
cells: [{
colSpan: 4, value: '2501 Aerial Center Parkway',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
}]
},
{
cells: [{
colSpan: 4, value: 'Suite 200 Morrisville, NC 27560 USA',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
}]
},
{
cells: [{
colSpan: 4, value: 'Tel +1 888.936.8638 Fax +1 919.573.0306',
style: { fontColor: '#C67878', fontSize: 15, hAlign: 'Center', bold: true, }
}]
},
{
cells: [{
colSpan: 4, hyperlink: { target: 'https://www.northwind.com/', displayText: 'www.northwind.com' },
style: { hAlign: 'Center' }
}]
},
{ cells: [{ colSpan: 4, hyperlink: { target: 'mailto:support@northwind.com' }, style: { hAlign: 'Center' } }] },
]
},
footer: {
footerRows: 4,
rows: [
{ cells: [{ colSpan: 4, value: 'Thank you for your business!', style: { hAlign: 'Center', bold: true } }] },
{ cells: [{ colSpan: 4, value: '!Visit Again!', style: { hAlign: 'Center', bold: true } }] }
]
},
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can assign the file name for the exported document by defining fileName
property in excelExportProperties
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'
[allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
fileName: 'new.xlsx'
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides an option to define datasource dynamically before exporting.
To export data dynamically, define the dataSource
in excelExportProperties
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='272px'
[allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
const excelExportProperties: ExcelExportProperties = {
dataSource: data
};
this.grid.excelExport(excelExportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The excel export provides outline option for grouped records which hides the detailed data for better viewing. In grid, we have provided the outline option for the exported document when the data’s are grouped.
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ToolbarItems, GroupService, PageService, GroupSettingsModel } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='data' [toolbar]='toolbarOptions' height='220px' [allowGrouping]='true'
[groupSettings]='groupOptions' [allowPaging]='true' [allowExcelExport]='true' (toolbarClick)='toolbarClick($event)'>
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>`,
providers: [PageService, GroupService]
})
export class AppComponent implements OnInit {
public data: object[];
public toolbarOptions: ToolbarItems[];
@ViewChild('grid') public grid: GridComponent;
public groupOptions: GroupSettingsModel;
ngOnInit(): void {
this.data = data;
this.toolbarOptions = ['ExcelExport'];
this.groupOptions = { columns: ['CustomerID', 'ShipCity'] };
}
toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'Grid_excelexport') { // 'Grid_excelexport' -> Grid component id + _ + toolbar item name
this.grid.excelExport();
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
The grid have an option to export the hierarchy grid to excel document. By default, grid will exports the visible child grids in expanded state. you can change the exporting option by using the ExcelExportProperties.hierarchyExportMode property. The available options are,
Mode | Behavior |
---|---|
Expanded | Exports the visible child grids in expanded state. |
All | Exports the all the child grids in expanded state. |
None | Exports the child grids in collapse state. |
import { Component, OnInit, ViewChild } from '@angular/core';
import { data, employeeData } from './datasource';
import { DetailRowService, GridModel, GridComponent, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
@Component({
selector: 'app-root',
template: `<ejs-grid #grid id='Grid' [dataSource]='pData' height='265px' [allowExcelExport]='true' [childGrid]='childGrid'
[toolbar]='["ExcelExport"]' (toolbarClick)="toolbarClick($event)">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
`,
providers: [DetailRowService]
})
export class AppComponent implements OnInit {
public pData: object[];
@ViewChild('grid') public grid: GridComponent;
public childGrid: GridModel = {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
};
ngOnInit(): void {
this.pData = employeeData;
}
toolbarClick(args: ClickEventArgs) {
if (args.item.id === 'Grid_excelexport') {
const exportProperties: ExcelExportProperties = {
hierarchyExportMode: 'Expanded'
};
this.grid.excelExport(exportProperties);
}
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { GridModule, ToolbarService, ExcelExportService } from '@syncfusion/ej2-angular-grids';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
GridModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ExcelExportService, ToolbarService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);