Excel Export Options in Angular Gantt Chart Component
18 Nov 201824 minutes to read
The Angular Gantt Chart component provides configurable options for Excel or CSV export through the ExcelExportProperties object. You can customize column selection, include hidden columns, define a custom data source, apply filters, and format exported data. It also supports setting file names, adding headers and footers, and exporting multiple Gantt Charts.
Export selected records
You can export selected records to Excel or CSV by using getSelectedRecords to retrieve the required data and assigning it to ExportProperties.dataSource within the toolbarClick event. Once the data source is set, initiate the export using excelExport or csvExport method.
import { Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { GanttModule, GanttComponent, ToolbarItem, ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';
import { GanttData } from './data';
@Component({
imports: [GanttModule],
providers: [ToolbarService, ExcelExportService, SelectionService],
standalone: true,
selector: 'app-root',
template: `
<ejs-gantt #gantt id="ganttDefault" height="450px" [dataSource]="data" [selectionSettings]='selectionSettings' [taskFields]="taskSettings" [toolbar]="toolbar" allowExcelExport="true" (toolbarClick)="toolbarClick($event)" >
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public selectionSettings?: SelectionSettingsModel;
ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
};
this.toolbar = ['ExcelExport'];
this.selectionSettings = { type: 'Multiple' };
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
const selectedRecords = (this.ganttInstance as GanttComponent).treeGrid.getSelectedRecords();
const exportProperties = {
dataSource: selectedRecords
};
(this.ganttInstance as GanttComponent).excelExport(exportProperties);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export const GanttData: object[] = [
{ TaskID: 1, TaskName: 'Planning', StartDate: new Date('2025-09-01'), Duration: 5, Progress: 100 },
{ TaskID: 2, TaskName: 'Design', StartDate: new Date('2025-09-06'), Duration: 3, Progress: 60, ParentID: 1 },
{ TaskID: 3, TaskName: 'Development', StartDate: new Date('2025-09-10'), Duration: 10, Progress: 30, ParentID: 1 },
{ TaskID: 4, TaskName: 'Soil Test Approval', StartDate: new Date('2025-09-21'), Duration: 2, Progress: 80 },
{ TaskID: 5, TaskName: 'Foundation', StartDate: new Date('2025-09-24'), Duration: 4, Progress: 50, ParentID: 4 },
{ TaskID: 6, TaskName: 'Structure', StartDate: new Date('2025-09-29'), Duration: 6, Progress: 40, ParentID: 4 }
];Show or hide columns during export
To show or hide specific columns during Excel export in Gantt, use the toolbarClick event to check args.item.id and update the columns.visible property to true or false . After the export is complete, restore the original column visibility using the excelExportComplete event.
The following example demonstrates how the StartDate column is made visible and the Duration column is excluded from the exported Excel file.
import { GanttModule, GanttComponent, ToolbarItem, ToolbarService, ExcelExportService, SelectionService, Column } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [GanttModule],
providers: [ToolbarService, ExcelExportService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" (excelExportComplete)='excelExportComplete()' allowExcelExport='true' [treeColumnIndex]="1">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public columns?: object[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'StartDate', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
this.toolbar = ['ExcelExport', 'CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[0] as Column).visible = true;
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[3] as Column).visible = false;
(this.ganttInstance as GanttComponent).excelExport();
} else if (args.item.id === 'ganttDefault_csvexport') {
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[0] as Column).visible = true;
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[3] as Column).visible = false;
(this.ganttInstance as GanttComponent).csvExport();
}
};
public excelExportComplete(): void {
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[0] as Column).visible = false;
((this.ganttInstance as GanttComponent).treeGrid.grid.columns[3] as Column).visible = true;
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Include hidden columns in export
To include hidden columns during Excel export in the Gantt Chart component, set ExportProperties.includeHiddenColumn to true in the export configuration. This ensures that hidden columns are included in the exported data.
The following example demonstrates that the hidden StartDate column is included in the exported file.
import { GanttAllModule, GanttComponent, ToolbarItem, ExcelExport } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [GanttAllModule],
standalone: true,
selector: 'app-root',
template: `
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public columns?: object[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'StartDate', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
this.toolbar = ['ExcelExport', 'CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
let excelExportProperties: ExcelExportProperties = {
includeHiddenColumn: true
};
this.ganttInstance!.excelExport(excelExportProperties);
} else if (args.item.id === 'ganttDefault_csvexport') {
let excelExportProperties: ExcelExport | any = {
includeHiddenColumn: true
};
this.ganttInstance!.csvExport(excelExportProperties);
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Enable filtering in exported Excel
To enable filtering in exported Excel or CSV files in Gantt Chart component, set the enableFilter property to true within ExcelExportProperties. Additionally, ensure that filtering is enabled in the Gantt configuration by setting allowFiltering to true.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ExcelExportService, GanttAllModule, ToolbarService, GanttComponent, ToolbarItem, FilterService } from '@syncfusion/ej2-angular-gantt'
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [GanttAllModule],
standalone: true,
providers: [ExcelExportService, ToolbarService, FilterService],
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [allowFiltering]='true' [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public columns?: object[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'StartDate', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
this.toolbar = ['ExcelExport', 'CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties: ExcelExportProperties = {
enableFilter: true
};
this.ganttInstance!.excelExport(excelExportProperties);
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Set custom file name
To specify a custom name for the exported Excel or CSV file in the Gantt Chart component, set the fileName property within the ExcelExportProperties configuration. This defines the name assigned to the file when the export is triggered.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ExcelExportService, GanttAllModule, ToolbarService, GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt'
import { TextBoxModule, TextBoxComponent } from '@syncfusion/ej2-angular-inputs'
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [GanttAllModule, TextBoxModule],
standalone: true,
providers: [ExcelExportService, ToolbarService],
selector: 'app-root',
template:`
<div style="padding: 0px 0 20px 0">
<label style="padding: 30px 17px 0 0;font-weight:bold">Enter file name: </label>
<ejs-textbox #textbox placeholder="Enter file name" width="120">
</ejs-textbox>
</div>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
@ViewChild('textbox') public textbox?: TextBoxComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public columns?: object[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'StartDate', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
this.toolbar = ['ExcelExport', 'CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
const excelExportProperties: ExcelExportProperties = {
fileName: (this.textbox as TextBoxComponent).value !== "" ? (this.textbox as TextBoxComponent).value + '.xlsx' : 'new.xlsx'
};
(this.ganttInstance as GanttComponent).excelExport(excelExportProperties);
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Customize exported columns
The Gantt Chart component supports customizing column settings during Excel or CSV export by configuring the ExcelExportProperties.columns property. You can specify attributes such as field, headerText, and textAlign to define the structure and formatting of each column in the exported file, aligning the exported content with specific layout and styling preferences.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem, ExcelExportService, GanttAllModule, ToolbarService } from '@syncfusion/ej2-angular-gantt';
import { Column, ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
selector: 'app-root',
standalone: true,
imports: [GanttAllModule],
providers: [ExcelExportService, ToolbarService],
template: `
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar" (toolbarClick)="toolbarClick($event)" allowExcelExport="true" [treeColumnIndex]="1">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.toolbar = ['ExcelExport', 'CsvExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
const exportColumns: Partial<Column>[] = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Project Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150', visible: false },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' }
];
const excelExportProperties: ExcelExportProperties = {
columns: exportColumns as Column[]
};
(this.ganttInstance as GanttComponent).excelExport(excelExportProperties);
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Add header and footer to export
To add header and footer content to exported Excel or CSV files in the Gantt Chart component, configure the header and footer properties within ExcelExportProperties during the toolbarClick event. This allows you to define custom content that appears at the top and bottom of the exported document.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttAllModule, GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [GanttAllModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.toolbar = ['ExcelExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
let 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:[email protected]' }, 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.ganttInstance as GanttComponent).excelExport(excelExportProperties);
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];Apply font and color themes
The Excel or CSV export feature in Gantt supports applying custom themes to the exported document, helping maintain a consistent and visually structured appearance.
To configure a theme, set the theme property within ExcelExportProperties. This allows customization of styles for the following sections in the exported file
- caption: Defines the style for the caption, typically used for titles or descriptions at the top of the sheet.
- header: Specifies the styling for column headers.
- record: Applies formatting to the data rows exported from the Gantt Chart.
import { GanttAllModule } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem } from '@syncfusion/ej2-angular-gantt';
import { ExcelExportProperties } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttData } from './data';
@Component({
imports: [ GanttAllModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" allowExcelExport='true' [treeColumnIndex]="1"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
@ViewChild('gantt', {static: true}) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public ngOnInit(): void {
this.data = GanttData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID:'ParentID',
};
this.toolbar = ['ExcelExport'];
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
let excelExportProperties: ExcelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' }
}
};
this.ganttInstance!.excelExport(excelExportProperties);
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let GanttData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];By default, tailwind3 theme is applied to the exported Excel document.
Apply conditional formatting
You can customize Gantt cells in exported Excel or CSV documents using the excelQueryCellInfo event. This event is triggered for each cell during export, allowing formatting to be conditionally applied based on the cell’s content.
In the example below, the background color is customized for the Progress column in the exported Excel or CSV file:
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { ToolbarService, ExcelExportService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { GanttComponent, ToolbarItem, IQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-angular-gantt';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { Column, ExcelQueryCellInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-grids';
import { editingData } from './data';
@Component({
imports: [GanttModule],
providers: [ToolbarService, ExcelExportService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [toolbar]="toolbar"
(toolbarClick)="toolbarClick($event)" (queryCellInfo)='queryCellInfo($event)' (excelQueryCellInfo)='excelQueryCellInfo($event)' (queryTaskbarInfo)='queryTaskbarInfo($event)' allowExcelExport='true' [treeColumnIndex]="1" [columns]="columns" [labelSettings]="labelSettings" [splitterSettings] = "splitterSettings"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent;
public data?: object[];
public taskSettings?: object;
public toolbar?: ToolbarItem[];
public columns?: object[];
public labelSettings?: object;
public splitterSettings?: object;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID',
};
this.toolbar = ['ExcelExport'];
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100', visible: false },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' }
];
this.labelSettings = {
taskLabel: '${Progress}%'
};
this.splitterSettings = {
columnIndex: 3
};
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'ganttDefault_excelexport') {
this.ganttInstance!.excelExport();
}
};
public excelQueryCellInfo(args: ExcelQueryCellInfoEventArgs): void {
if (args.column.field === 'Progress') {
const progressValue = args.value as number;
if (progressValue > 80) {
args.style = { backColor: '#A569BD' };
} else if (progressValue < 20) {
args.style = { backColor: '#F08080' };
}
}
}
public queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs): void {
const progress = (args.data as { Progress: number }).Progress;
if (progress > 80) {
args.progressBarBgColor = "#6C3483";
args.taskbarBgColor = args.taskbarBorderColor = "#A569BD";
} else if (progress < 20) {
args.progressBarBgColor = "#CD5C5C";
args.taskbarBgColor = args.taskbarBorderColor = "#F08080";
}
}
public queryCellInfo(args: QueryCellInfoEventArgs): void {
if ((args.column as Column).field === 'Progress') {
const progress = (args.data as { Progress: number }).Progress;
if (progress > 80) {
(args.cell as HTMLElement).style.backgroundColor = '#A569BD';
} else if (progress < 20) {
(args.cell as HTMLElement).style.backgroundColor = '#F08080';
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* Gantt DataSource
*/
export let editingResources: Object[] = [
{ resourceId: 1, resourceName: 'Martin Tamer' },
{ resourceId: 2, resourceName: 'Rose Fuller' },
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
{ resourceId: 4, resourceName: 'Fuller King' },
{ resourceId: 5, resourceName: 'Davolio Fuller' },
{ resourceId: 6, resourceName: 'Van Jack' },
{ resourceId: 7, resourceName: 'Fuller Buchanan' },
{ resourceId: 8, resourceName: 'Jack Davolio' },
{ resourceId: 9, resourceName: 'Tamer Vinet' },
{ resourceId: 10, resourceName: 'Vinet Fuller' },
{ resourceId: 11, resourceName: 'Bergs Anton' },
{ resourceId: 12, resourceName: 'Construction Supervisor' }
];
export let editingData: Object[] = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 90 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: 2, ParentID: 1, Progress: 40 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, ParentID: 1, Progress: 10 },
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
},
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 85 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 15 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, ParentID: 5, Progress: 70 }
];
export let projectResources: Object[] = [
{ resourceId: 1, resourceName: 'Project Manager' },
{ resourceId: 2, resourceName: 'Software Analyst' },
{ resourceId: 3, resourceName: 'Developer' },
{ resourceId: 4, resourceName: 'Testing Engineer' }
];
export let projectData: Object[] = [
{
taskID: 1,
taskName: 'Project Schedule',
startDate: new Date('02/08/2019'),
endDate: new Date('03/15/2019'),
subtasks: [
{
taskID: 2,
taskName: 'Planning',
startDate: new Date('02/08/2019'),
endDate: new Date('02/12/2019'),
subtasks: [
{
taskID: 3, taskName: 'Plan timeline', startDate: new Date('02/08/2019'),
endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
},
{
taskID: 4, taskName: 'Plan budget', startDate: new Date('02/08/2019'),
endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
},
{
taskID: 5, taskName: 'Allocate resources', startDate: new Date('02/08/2019'),
endDate: new Date('02/12/2019'), duration: 5, progress: '100', resourceId: [1]
},
{
taskID: 6, taskName: 'Planning complete', startDate: new Date('02/10/2019'),
endDate: new Date('02/10/2019'), duration: 0, predecessor: '3FS,4FS,5FS'
}
]
},
]
}
];