[REACT] Gantt Print Functionality

[ahmad.siddique]

Hi everyone,

I have added functionality to print the gantt chart using

https://bryntum.com/products/gantt/examples/print/

Now what I want is that when I Print the gantt chart I dont want any empty space below the gantt chart. The page should be resized automatically instead of showing empty space below to fill the page.
This is what i want it to look like

Screenshot 2023-12-21 at 7.49.50 PM.png (158.94 KiB) Viewed 1304 times

instead of

Screenshot 2023-12-21 at 7.50.22 PM.png (89.95 KiB) Viewed 1304 times

[alex.l]

Hi,

The page should be resized automatically instead of showing empty space below to fill the page.

Do you mean paper size for printing should be resized automatically? It is not supported and not sure why it should, I can't see any scenarios how it might be used to print in random sized paper, could you please explain a bit?

[ahmad.siddique]

Thank you for guiding me thoroughly.

Right now I am facing an issue with the header and footer in print functionality.
If there is more than one page to print the header added in the print always covers the topmost task.

This issue can be recreated in Print Demo https://bryntum.com/products/gantt/examples/print/

Steps to recreate :

1. Create 100 tasks to print
2. Click Print
3. Print settings are set to default
4. See Print Preview

Issue:

Screenshot 2024-01-08 at 2.56.06 PM.png (37.4 KiB) Viewed 1009 times

[ghulam.ghous]

Hi Ahmad,

Unable to repro this issue. I have tried the exact same steps to repro this, create more than 100 tasks, clicked on print demo, clicked on export, and then in preview all tasks were clearly visible, topmost task on page 2 was not covered. See the screenshot:

Screenshot 2024-01-08 at 3.42.21 PM.png (639.49 KiB) Viewed 1000 times

A more clear view:

Screenshot 2024-01-08 at 3.46.04 PM.png (36.13 KiB) Viewed 1000 times

Are you using the latest version? Probably a test case so we can repro this issue?

Regards,
Ghous

[ahmad.siddique]

Thank you for the guidance.

I have another weird issue that is only reproduced occasionally. When I click on the export button of the print dialog it takes around 17 minutes to process everything and then shows the print preview.

I am also attaching a video for reference

20240108211135066-printoptionganttdelay.mp4

(27.25 MiB) Downloaded 91 times

[ghulam.ghous]

Hi Ahmad,

Unfortunately I am unable to repro this. Can you provide us a test case so we can debug and see why it is taking so long? It will help us to identify the issue. I have checked this multiple times in our online demo and it does not take so long.

Regards,
Ghous

[ahmad.siddique]

Hi,

I have 10 pages to print in Gantt. Is there a way to show HeaderTpl on only the first page and FooterTpl on only the last page?

[ghulam.ghous]

Hi there,

We do not have a config for this. But you can achieve this by customizing the headerTpl and footerTpl in the following way:

const headerTpl = ({ currentPage, totalPages }) => currentPage===0 ?
    `<img alt="Company logo" src="resources/bryntum.svg"/>
    <dl>
        <dt>Date: ${DateHelper.format(new Date(), 'll LT')}</dt>
        <dd>${totalPages ? `Page: ${currentPage + 1}/${totalPages}` : ''}</dd>
    </dl>
    `:null;

const footerTpl = ({ currentPage, totalPages }) => currentPage+1 === totalPages ?`<h3>© ${new Date().getFullYear()} Bryntum AB</h3></div>`: null;

Regards,
Ghous

[ghulam.ghous]

Btw I created a feature request to add config for this. See here https://github.com/bryntum/support/issues/8331

[ahmad.siddique]

Hi everyone,

I noticed there is another issue with Print functionality when printing in Landscape mode.

multiple pages are left blank and also the footer gets messed up.

The issue can be reproduced on https://bryntum.com/products/gantt/examples/print/

To reproduce the issue just create more than 100 tasks and print in landscape orientation.

I am also attaching a video link for reference. https://www.loom.com/share/eb4eff29fbb7408eaddcd33a62502a2b
Thanks.