Excel export options in Angular Treegrid component
17 Nov 202213 minutes to read
To customize excel export
The excel export provides an option to customize mapping of the treegrid to excel document.
Export hidden columns
Excel Export provides an option to export hidden columns of TreeGrid by defining the includeHiddenColumn
as true
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems, ExcelExportProperties } from '@syncfusion/ej2-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' [visible]='false' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
public pager: Object;
@ViewChild('treegrid')
public treeGridObj: TreeGridComponent;
public toolbarOptions: ToolbarItems[];
ngOnInit(): void {
this.data = sampleData;
this.pager = { pageSize: 7 };
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: Object) : void {
if (args['item'].text === 'Excel Export') {
let exportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
this.treeGridObj.excelExport(exportProperties);
}
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, ExcelExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
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);
Show or hide columns on exported excel
You can show a hidden column or hide a visible column while printing the treegrid using toolbarClick
and excelExportComplete
events.
In the toolbarClick
event, based on args.item.text
as Excel Export
. 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 Duration
as a hidden column in the treegrid. While exporting, we have changed Duration
to visible column and StartDate
as hidden column.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (excelExportComplete)='excelExportComplete($event)' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
public pager: Object;
@ViewChild('treegrid')
public treeGridObj: TreeGridComponent;
public toolbarOptions: ToolbarItems[];
ngOnInit(): void {
this.data = sampleData;
this.pager = { pageSize: 7 };
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: Object) : void {
if (args['item'].text === 'Excel Export') {
let cols: Column[] = this.treeGridObj.grid.columns;
cols[2].visible = false;
cols[3].visible = true;
this.treeGridObj.excelExport();
}
}
excelExportComplete(): void {
let cols: Column[] = this.treeGridObj.grid.columns;
cols[3].visible = false;
cols[2].visible = true;
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, ExcelExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
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);
File name for exported document
You can assign the file name for the exported document by defining fileName
property in ExcelExportProperties
.
import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
@Component({
selector: 'app-container',
template: `<ejs-treegrid [dataSource]='data' #treegrid height='220' (toolbarClick)='toolbarClick($event)' [allowPaging]='true' [allowExcelExport]='true' [pageSettings]='pager' [treeColumnIndex]='1' childMapping='subtasks' [toolbar]='toolbarOptions'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=90></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' width=180></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=120></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=110></e-column>
</e-columns>
</ejs-treegrid>`
})
export class AppComponent implements OnInit {
public data: Object[];
public pager: Object;
@ViewChild('treegrid')
public treeGridObj: TreeGridComponent;
public toolbarOptions: ToolbarItems[];
ngOnInit(): void {
this.data = sampleData;
this.pager = { pageSize: 7 };
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args: Object) : void {
if (args['item'].text === 'Excel Export') {
let excelExportProperties: ExcelExportProperties = {
fileName:"new.xlsx"
};
this.treeGridObj.excelExport(excelExportProperties);
}
}
}
import { NgModule,ViewChild } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';
import { PageService, ExcelExportService, ToolbarService } from '@syncfusion/ej2-angular-treegrid';
import { AppComponent } from './app.component';
import {ButtonModule} from '@syncfusion/ej2-angular-buttons';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [PageService,
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);