Is there a way to make gantt chart to fit a single page when exporting to PDF? Timeline display breaks into subsequent pages depending on the tasks date-range.

[DantonGodoy]

HI Syncfusion,

My project is on Angular 14 version and I'm using the "@syncfusion/ej2-angular-gantt": "^23.1.36".

My current gantt chart implementation is working fine but one of my users request was that every time he imports a chart to PDF, the timeline display breaks into subsequent pages instead of keeping the whole chart content in a single page in the output PDF file.

This is how I access the gantt chart: @ViewChild('gantt') ganttObj: GanttComponent;

This is how my component is setup:

<ejs-gantt
  [dataSource]="ganttData"
  [taskFields]="taskSettings"
  [eventMarkers]="eventMarkers"
  [columns]="ganttColumns"
  [splitterSettings]="splitterSettings"
  [toolbar]="toolbar"
  allowPdfExport="true"
  allowExcelExport="true"
  (toolbarClick)="ganttToolbarClick($event)"
  (queryTaskbarInfo)="queryTaskbarInfo($event)"
  (recordDoubleClick)="recordDoubleClick($event)"
  (rowSelected)="rowSelected($event)"
  (beforePdfExport)="beforePdfExport($event)"
  (pdfQueryTimelineCellInfo)="pdfQueryTimelineCellInfo($event)"
  #gantt
>
</ejs-gantt>

This is my current beforePdfExport(event) and the ganttToolbarClick() functions respectively:

public beforePdfExport(event): void {
  const ganttObject: GanttComponent = event.ganttObject;
  const startDateColumn = ganttObject.treeGrid.columns[1] as any;
  const endDateColumn = ganttObject.treeGrid.columns[2] as any;
  startDateColumn.visible = false;
  endDateColumn.visible = false;
}

ganttToolbarClick(event: { item: { properties: { id: string } } }): void {
  if (event.item.properties.id.endsWith('pdfexport')) {
    const exportProperties: PdfExportProperties = {
      fileName: `gantt_${Date.now()}.pdf`,
      pageSize: 'A4',
      exportType: 'CurrentViewData',
      fitToWidthSettings: {
        isFitToWidth: true,
        gridWidth: '15',
        chartWidth: '85',
      },
    };
    this.ganttObj.pdfExport(exportProperties, false);
  }
}

The timeline display is pretty hard to configure properly since its width is very dynamic, if I have tasks in a date range of years for example, the progress bars inside the timeline will be huge as well. Also, I'm using the fitToWidthSettings object configuration but with no success, timeline is still overflowing to other pages.

This is the outputted PDF file (timeline overflows to the next page).

My question is, is there a way or a workaround to force the output PDF to always respect the 100% width of the document and render the timeline display of the chart in the same page?

Your help will be much appreciated. Thank you.

[alansangeeths]

Syncfusion gantt has single page exporting suport from 2023 Volume 3 release. Each rows are auto-fit to the PDF document page width using fitToWidthSettings in PdfExportProperties.

Demo link: https://ej2.syncfusion.com/angular/demos/#/material3/gantt/exporting - Toggle the radio button "AutoFit in Pdf Export".

Documentation: https://ej2.syncfusion.com/angular/documentation/gantt/pdf-export/pdf-export#single-page-exporting-in-gantt

[gsumankumar]

Since there has been no activity on this issue for over a week, we are closing it as part of our routine maintenance. If the previously shared solution doesn't resolve the problem or if you have additional information to assist us, please feel free to reopen the issue. We appreciate your understanding.

[DantonGodoy]

Since there has been no activity on this issue for over a week, we are closing it as part of our routine maintenance. If the previously shared solution doesn't resolve the problem or if you have additional information to assist us, please feel free to reopen the issue. We appreciate your understanding.

I was able to fix it using fitToWidthSettings and by setting the rangeDate value dynamically based on all the event's date I have in my API response.

Thanks for your support!