Excel export in Angular TreeGrid component
25 Aug 202512 minutes to read
Excel export in the TreeGrid component enables exporting TreeGrid data to an Excel document. The excelExport
method is used for exporting data. To enable Excel export in TreeGrid, set the allowExcelExport
property to true.
Inject the ExcelExport
module into the TreeGrid to use the Excel export feature.
Watch this video to learn how to perform exporting operations and customize them in Angular TreeGrid.
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 {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
ExcelExportService,
ToolbarService],
standalone: true,
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 | any) : void {
if (args['item'].text === 'Excel Export') {
this.treeGridObj?.excelExport();
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
Persisting collapsed state
The collapsed state of nodes in the exported Excel document can be persisted by setting the isCollapsedStatePersist
property to true within the TreeGridExcelExportProperties
parameter of the excelExport
method.
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 {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems, TreeGridExcelExportProperties } from '@syncfusion/ej2-treegrid';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
ExcelExportService,
ToolbarService],
standalone: true,
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 | any) : void {
if (args['item'].text === 'Excel Export') {
let excelExportProperties: TreeGridExcelExportProperties = {
isCollapsedStatePersist: true
};
this.treeGridObj?.excelExport(excelExportProperties);
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
The CSV export feature allows exporting TreeGrid data to a text document. Use the
csvExport
method for exporting. To enable CSV export in TreeGrid, set theallowCsvExport
property to true.
Custom data source
Excel export provides the capability to define a data source dynamically before exporting. To export data dynamically, assign a value to the dataSource
property in 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 {ButtonModule} from '@syncfusion/ej2-angular-buttons'
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns'
import { Component, OnInit } from '@angular/core';
import { sampleData } from './datasource';
import { ToolbarItems } from '@syncfusion/ej2-treegrid';
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
@Component({
imports: [
TreeGridModule,
ButtonModule,
DropDownListAllModule,
],
providers: [PageService,
ExcelExportService,
ToolbarService],
standalone: true,
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 | any) : void {
if (args['item'].text === 'Excel Export') {
let excelExportProperties: ExcelExportProperties = {
dataSource: sampleData
};
this.treeGridObj?.excelExport(excelExportProperties);
}
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
For more information, refer to the
Angular TreeGrid
feature tour page. You can also explore theAngular TreeGrid example
to discover how to present and manipulate data.