Example of undefined in React Gantt Component

All Controls
/
Gantt
/
AdvancedExporting

This sample demonstrates the advanced PDF export features of the Gantt Chart, allowing customization of various elements such as headers, footers, task labels, event markers, holidays, and taskbars. These customizations can be configured using the pdfExportProperties and pdfQueryTaskbarInfo event.

More Details...

1
Project initiation
Apr 02, 2025Apr 08, 202530
2
Identify site location
Apr 02, 2025Apr 02, 202530
3
Perform soil test
Apr 02, 2025Apr 08, 202530
4
Soil test approval
Apr 08, 2025Apr 08, 202530
5
Project estimation
Apr 09, 2025Apr 16, 202530
6
Develop floor plan for estimation
Apr 09, 2025Apr 11, 202530
7
List materials
Apr 14, 2025Apr 16, 202530
8
Estimation approval
Apr 16, 2025Apr 16, 20250
9
Sign contract
Apr 17, 2025Apr 17, 202530
10
Project approval and kick off
Apr 17, 2025Apr 17, 20250
11
Site work
Apr 17, 2025Apr 21, 202530
12
Clear the building site
Apr 17, 2025Apr 18, 202530
13
Install temporary power service
Apr 18, 2025Apr 21, 202530
14
Foundation
Apr 07, 2025May 05, 202523
15
Excavate for foundations
Apr 07, 2025Apr 09, 202530
16
Dig footer
Apr 07, 2025Apr 08, 20250
17
Install plumbing grounds
Apr 22, 2025Apr 25, 202530
18
Pour a foundation and footer with concrete
Apr 28, 2025Apr 28, 20250
19
Cure basement walls
Apr 29, 2025May 05, 202530
20
Framing
May 06, 2025May 21, 202520
21
Add load-bearing structure
May 06, 2025May 08, 202530
22
Install floor joists
May 09, 2025May 13, 20250
23
Add ceiling joists
May 09, 2025May 13, 202530
24
Install subfloor panels
May 14, 2025May 16, 20250
25
Frame floor walls
May 19, 2025May 21, 202530
26
Frame floor decking
May 19, 2025May 21, 202530
27
Exterior finishing
Apr 07, 2025Apr 14, 202515
28
Cover outer walls and roof in OSB
Apr 07, 2025Apr 09, 202530
29
Add water resistive barrier
Apr 10, 2025Apr 14, 20250
Local Holiday
Good Friday
Release Holiday
Project initiation
Identify site location
Martin TamerMartin Tamer
Perform soil test
Rose FullerRose Fuller
Soil test approval
Project estimation
Develop floor plan for estimation
List materials
Fuller KingFuller King
Estimation approval
Rose FullerRose Fuller
Sign contract
Rose FullerRose Fuller
Project approval and kick off
Site work
Clear the building site
Martin TamerMartin Tamer
Install temporary power service
Martin TamerMartin Tamer
Foundation
Excavate for foundations
Jack DavolioJack Davolio
Dig footer
Jack DavolioJack Davolio
Install plumbing grounds
Van JackVan Jack
Pour a foundation and footer with concrete
Jack DavolioJack Davolio
Cure basement walls
Davolio FullerDavolio Fuller
Framing
Add load-bearing structure
Fuller KingFuller King
Install floor joists
Margaret BuchananMargaret Buchanan
Add ceiling joists
Davolio FullerDavolio Fuller
Install subfloor panels
Jack DavolioJack Davolio
Frame floor walls
Martin TamerMartin Tamer
Frame floor decking
Fuller KingFuller King
Exterior finishing
Cover outer walls and roof in OSB
Jack DavolioJack Davolio
Add water resistive barrier
Martin TamerMartin Tamer
Research phase
Sales and marketing phase
Description

In this sample, the Gantt Chart's PDF export functionality is enhanced with various customization options:

  • Custom Headers and Footers: The headers and footers in the exported PDF can be customized using the header and footer properties,which allowing us to include relevant information of exported PDF.
  • Taskbar and Task Label Styling:Taskbar and Task Label appearance can be customized in the exported PDF using the pdfQueryTaskbarInfoEvent.
  • Event marker and holiday:Event marker and holiday can be cusotmized in exported PDF using ganttstyle in pdfExportProperties.
  • Fit-to-Width Support: This feature allows the Gantt component's rows to be auto-fitted to the width of the PDF document's page using the fitToWidthSettings in pdfExportProperties.

More information about advanced PDF exporting features in Gantt can be found in the documentation section.

Injecting Module:

To use PDF export feature, we need to inject pdfExport module into the services.