The excel export allows exporting TreeGrid data to Excel document. You need to use the
excelExport
method for exporting. To enable Excel export in the treegrid, set the allowExcelExport
as true.
To use excel export, You need to inject the ExcelExport module in treegrid.
To get start quickly with exporting functionalities, you can check on this video:
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
this.treegrid.excelExport();
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
this.treegrid.excelExport();
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
The excel export provides an option to customize mapping of the treegrid to excel document.
The excel export provides an option to export hidden columns of treegrid by defining includeHiddenColumn
as true.
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties = {
includeHiddenColumn: true
};
this.treegrid.excelExport(excelExportProperties);
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false} headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
this.treegrid.excelExport(excelExportProperties);
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' visible={false} headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
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 { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
const cols = this.treegrid.grid.columns;
cols[2].visible = false;
cols[3].visible = true;
this.treegrid.excelExport();
}
}
excelExportComplete() {
if (this.treegrid) {
const cols = this.treegrid.grid.columns;
cols[3].visible = false;
cols[2].visible = true;
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' visible={false} headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { Column, ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
const cols: Column[] = this.treegrid.grid.columns as Column[];
cols[2].visible = false;
cols[3].visible = true;
this.treegrid.excelExport();
}
}
public excelExportComplete(): void {
if (this.treegrid) {
const cols: Column[] = this.treegrid.grid.columns as Column[];
cols[3].visible = false;
cols[2].visible = true;
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' visible={false} headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
TreeGrid cells in the exported Excel can be customized or formatted using excelQueryCellInfo
event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Duration column in the exported excel by args.cell and backgroundColor property.
import { getValue } from '@syncfusion/ej2-base';
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
this.treegrid.excelExport();
}
}
excelQueryCellInfo(args) {
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.style = { backColor: '#336c12' };
}
else if (getValue('data.duration', args) < 3) {
args.style = { backColor: '#7b2b1d' };
}
}
}
queryCellInfo(args) {
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.cell.style.background = '#336c12';
}
else if (getValue('data.duration', args) < 3) {
args.cell.style.background = '#7b2b1d';
}
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions} queryCellInfo={this.queryCellInfo} excelQueryCellInfo={this.excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { getValue } from '@syncfusion/ej2-base';
import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
this.treegrid.excelExport();
}
}
public excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
if (args.column.field === 'duration') {
if (getValue('data.duration', args) === 0) {
args.style = {backColor: '#336c12'};
}
else if (getValue('data.duration', args) < 3) {
args.style = {backColor: '#7b2b1d'};
}
}
}
public queryCellInfo(args: QueryCellInfoEventArgs): void {
if ((args.column as Column).field === 'duration') {
if (getValue('data.duration', args) === 0) {
(args.cell as HTMLElement).style.background= '#336c12';
} else if (getValue('data.duration', args) < 3) {
(args.cell as HTMLElement).style.background= '#7b2b1d';
}
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions} queryCellInfo={this.queryCellInfo} excelQueryCellInfo={this.excelQueryCellInfo}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
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 { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
const exportProperties = {
theme: {
caption: { fontName: 'Segoe UI', fontColor: '#666666' },
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
this.treegrid.excelExport(exportProperties);
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
const exportProperties: ExcelExportProperties = {
theme:
{
caption: { fontName: 'Segoe UI', fontColor: '#666666' },
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
this.treegrid.excelExport(exportProperties);
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
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 { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties = {
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 } }] }
]
},
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' } }] },
]
}
};
this.treegrid.excelExport(excelExportProperties);
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties: ExcelExportProperties = {
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 } }] }
]
},
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' } }] },
]
}
};
this.treegrid.excelExport(excelExportProperties);
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
You can assign the file name for the exported document by defining fileName
property in ExcelExportProperties
.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args) {
if (args.item.text === 'Excel Export') {
let excelExportProperties = {
fileName: "new.xlsx"
};
this.treegridInstance.excelExport(excelExportProperties);
}
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={{ pageSize: 7 }} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick.bind(this)} ref={treegrid => this.treegridInstance = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, ExcelExport, ExcelExportProperties, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
public toolbarOptions: any = ['ExcelExport'];
private treegridInstance: TreeGridComponent;
public toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Excel Export') {
let excelExportProperties: ExcelExportProperties = {
fileName:"new.xlsx"
};
this.treegridInstance.excelExport(excelExportProperties);
}
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={{ pageSize: 7 }} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick.bind(this)} ref={ treegrid => this.treegridInstance = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));
You can persist the collapsed state in the exported document by defining isCollapsedStatePersist
property as true in TreeGridExcelExportProperties
parameter of excelExport
method.
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, ExcelExport, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
}
toolbarClick(args) {
if (args.item.text === 'Excel Export') {
let excelExportProperties = {
isCollapsedStatePersist: true
};
this.treeGridObj.excelExport(excelExportProperties);
}
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={{ pageSize: 7 }} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick.bind(this)} ref={treegrid => this.treegridInstance = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page, Toolbar, ExcelExport, TreeGridExcelExportProperties, Inject } from '@syncfusion/ej2-react-treegrid';
import { sampleData } from './datasource';
class App extends React.Component<{}, {}>{
public toolbarOptions: any = ['ExcelExport'];
private treegridInstance: TreeGridComponent;
public toolbarClick(args: ClickEventArgs): void {
if (args.item.text === 'Excel Export') {
let excelExportProperties: TreeGridExcelExportProperties = {
isCollapsedStatePersist: true
};
this.treeGridObj.excelExport(excelExportProperties);
}
}
render() {
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={{ pageSize: 7 }} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick.bind(this)} ref={ treegrid => this.treegridInstance = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'></ColumnDirective>
<ColumnDirective field='taskName' headerText='Task Name' width='180'></ColumnDirective>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
ReactDOM.render(<App />, document.getElementById('treegrid'));
The excel export provides an option to define datasource dynamically before exporting. To export data dynamically, define the dataSource
in ExcelExportProperties
.
import { ColumnDirective, ColumnsDirective, Page, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
constructor() {
super(...arguments);
this.toolbarOptions = ['ExcelExport'];
this.pageSettings = { pageSize: 7 };
}
toolbarClick(args) {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties = {
dataSource: sampleData
};
this.treegrid.excelExport(excelExportProperties);
}
}
render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks' allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220' toolbarClick={this.toolbarClick} ref={treegrid => this.treegrid = treegrid} toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date'/>
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right'/>
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>;
}
}
import { ExcelExportProperties } from '@syncfusion/ej2-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnDirective, ColumnsDirective, Page, PageSettingsModel, TreeGridComponent } from '@syncfusion/ej2-react-treegrid';
import { ExcelExport, Inject, Toolbar, ToolbarItems, TreeGrid } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component<{}, {}>{
public toolbarOptions: ToolbarItems[] = ['ExcelExport'];
public pageSettings: PageSettingsModel = { pageSize: 7 };
public treegrid: TreeGrid | null;
public toolbarClick(args: ClickEventArgs): void {
if (this.treegrid && args.item.text === 'Excel Export') {
const excelExportProperties: ExcelExportProperties = {
dataSource: sampleData
};
this.treegrid.excelExport(excelExportProperties);
}
}
public render() {
this.toolbarClick = this.toolbarClick.bind(this);
return <TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping='subtasks'
allowPaging='true' pageSettings={this.pageSettings} allowExcelExport='true' height='220'
toolbarClick={this.toolbarClick} ref={ treegrid => this.treegrid = treegrid}
toolbar={this.toolbarOptions}>
<ColumnsDirective>
<ColumnDirective field='taskID' headerText='Task ID' width='90' textAlign='Right'/>
<ColumnDirective field='taskName' headerText='Task Name' width='180'/>
<ColumnDirective field='startDate' headerText='Start Date' width='90' format='yMd' textAlign='Right' type='date' />
<ColumnDirective field='duration' headerText='Duration' width='80' textAlign='Right' />
</ColumnsDirective>
<Inject services={[Page, Toolbar, ExcelExport]}/>
</TreeGridComponent>
}
}
You can refer to our
React Tree Grid
feature tour page for its groundbreaking feature representations. You can also explore ourReact Tree Grid example
to knows how to present and manipulate data.