Excel Export Options in TypeScript Gantt Chart Control

18 Nov 20182 minutes to read

The TypeScript Gantt Chart control 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.

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.

Include hidden columns in export

To include hidden columns during Excel export in the Gantt Chart control, 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.

Enable filtering in exported Excel

To enable filtering in exported Excel or CSV files in Gantt Chart control, set the enableFilter property to true within ExcelExportProperties. Additionally, ensure that filtering is enabled in the Gantt configuration by setting allowFiltering to true.

Set custom file name

To specify a custom name for the exported Excel or CSV file in the Gantt Chart control, set the fileName property within the ExcelExportProperties configuration. This defines the name assigned to the file when the export is triggered.

Customize exported columns

The Gantt Chart control 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.

To add header and footer content to exported Excel or CSV files in the Gantt Chart control, 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.

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.

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: