exportToPDF with merge_pages

Gantt
#1

When I merge pages in the exportToPDF method along with fixed_headers, the first row of the export is always cutoff.

image
image1463×1224 63.7 KB

If the fixed_headers attribute is false, the first row looks fine.

image
image1847×718 56.3 KB

Any thoughts on to fix?

#2

Hello Stephen,
As the documentation says, there is no way to control the cutoff position:
https://docs.dhtmlx.com/gantt/api__gantt_exporttopdf.html#multipageexport

So, it is necessary to implement custom solutions to prevent the task rows from being cut between the pages. The easiest way is to calculate the height of each page and add the tasks with the calculated height so that they will serve as separators between the pages. This approach is described in the blog article:

If you increase the height of the separator task to include the grid and timeline headers, they won’t cover the task rows:

You can use the suggested code from the snippets:
https://snippet.dhtmlx.com/w905ht5t

https://snippet.dhtmlx.com/xkmvduu5

#3

Thanks Ramil. Appreciate the detailed explanation and suggested code snippets. I will check them out.

#4

One additional question. Does “merge_pages: true” with “fixed_headers: true”, support a custom header on the first page? I cannot get it to work, so my guess is no.

#5

Hello Stephen,
If you add a custom content to the header parameter, it is rendered above the Gantt container. When the grid and timeline headers are rendered on each page, they are rendered on the top position. There is no way to render it on a different position only for the first page. This means, you need to add margin to the top position, and it will be rendered that way on each page.

So, first you need to know the size of the custom elements above Gantt. Then you can add it to the gridHeaderHeight parameter, for example:

const gridHeaderHeight = gantt.$grid_scale.getBoundingClientRect().height + 20;

Then you need to add the following style rules to change the headers vertical position:

.grid_cell .gantt_grid_scale,
.timeline_cell .gantt_task_scale {
  top:50px;
}

Also, you may need to customize the solution to make it fit your needs.

Here is the updated snippet that can help you to start:
https://snippet.dhtmlx.com/png12xrn

#6

I modified my code based on your snippet. My custom header rendered on the first page, but no subsequent pages. The space for the header is there, but the header content is not. Any thoughts on why this might happen? I tried play with inline styles for the z-index, but that has not helped.

First Page:

image
image1170×89 17.7 KB

Second Page:

image
image1076×92 4.59 KB

#7

Hello Stephen,
When you enable the fixed_headers parameter, only the grid and timeline headers are supposed to be displayed on each page. The custom content in the header parameter is not displayed on each page. If you need that, you can add the position: fixed style rule.

Here is the updated snippet:
https://snippet.dhtmlx.com/vj1pcoax

#8

That worked :grinning:! Very much appreciate the follow-up.