PDF tasks all in single time slot?

[Kevin]

I've got a Gantt chart that I've limited the amount of customization, just defined it using two two datasources, a single 'Title' column and some Pdf settings. Whenever I export to Pdf, it's huge width, and all of my tasks are slotted in the first time slot.

I was using R2 2021, so I just updated to R3, v2021.3.914 and I'm still seeing the same behaviour.

I think I'm going a bit nuts since other users seem to be able to export to Pdf no problem. I had a custom JS build including only the components I require, so I wonder if I'm missing a dependency that helps with the time aspect of Pdf? So I tried using kendo.all.min.js and I'm still having some pretty unfortunate PDF exports.

The datasources aside (they seem to be operating fine, all the behaviour and functionality in the Gantt chart seems to be working without error), here is the init of my Gantt.

$("#gantt").kendoGantt({
    dataSource: tasks,
    dependencies: dependencies,
    columns: [
        { field: "title", title: "Title" }
    ],
    pdf: {
        fileName: 'GanttTest.pdf',
        paperSize: 'auto',
        landscape: true
    }
});

I've attached a screenshot of the UI, which is great. The tasks are all working fine in the UI, the dependencies all work. You can see where the times are slotted in the UI.

Then when I export to PDF, you can see the tasks are all incorrectly rendered under the 8AM time slot, and the other time slots are taking up way too much of the PDF making it pretty much useless as an export.

I've also tried playing with paper sizes in the pdf settings, which usually results in cutting off the content, even though the tasks are still all rendered under the 8AM time slot.

Has anyone else seen this behaviour?

Kevin

[Neli]

Hi Kevin,

May I ask you to double-check if you have applied some custom stylesheets? The exported PDF files can be modified using the 'k-pdf-export' class as described in the document linked here. Thus, I would suggest you to remove all custom stylesheets and test the appearance. 

I have prepared the following Dojo example where a similar appearance to the one from the screenshot is achieved when the Gantt is exported to PDF using the 'k-pdf-export' class. If you try to remove the styles at the bottom of the Dojo you will see that the Gantt is exported as expected. 

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik

[Kevin]

I haven't quite got it resolved yet - but thank you for pointing me in the right direction. I don't have anything targeting k-pdf-export, but I do have some customizations to various common classes in Kendo (like grids, tables, buttons, etc).

I'm using SCSS to build a slightly customized version of the @progress/kendo-bootstrap-theme package, and somewhere in my customizations it's causing the PDF export to go awry.

Can I create customizations and use a negative selector to avoid affecting the pdf export? Performance aside, I'm thinking I could customize a grid like *:not(.k-pdf-export) .k-grid { ... } for example.

Is there a better way to do this? What about excluding the @media print, would that avoid affecting pdf export?

[Neli]

Hi Kevin,

I am afraid that using the .k-pdf-export class in a negative selector will not going to resolve the issue.

I would suggest you add some styles using the .k-pdf-export class in order to style the Gantt and achieve the needed appearance when it is exported to PDF. In the modified Dojo linked here, the Gantt is styled differently when exported to PDF. 

Regarding the media queries, usually, they are used to apply different styles depending on the screen size, so the styles used in media queries will be applied also in the PDF. 

I hope this helps.

Regards,

Neli