My timeline seems to only export those parts that I’ve made visible on the screen. I would like the entire timeline and all its tasks to be exported.
I’ve also noticed that when I have 100s of rows the lower onces are returning blank when exported.
Finally I have a second grid/timeline that shows holiday dates, but when exported the width of this grid does not match the width of the other.
Can I get some guidance on this?
Hello,
My timeline seems to only export those parts that I’ve made visible on the screen. I would like the entire timeline and all its tasks to be exported.
The chart is not fully visible in the exported file because of a bug that is related to the layout configuration. We are aware of that. The dev team will fix it in the future, but I cannot give you any ETA.
As a workaround, you can add a CSS rule to increase the timeline width:
gantt.exportToPDF({
header: `.timeline_cell{width: ${gantt.$task_data.scrollWidth}px !important;}`,
raw: true
});
Please check the following example of how it might be implemented:
https://snippet.dhtmlx.com/jjehcruv
Or you can use the autosize option to stretch the grid, then restore the previous width. There is an article about autosize property:
https://docs.dhtmlx.com/gantt/api__gantt_autosize_config.html
For example, like this:
gantt.config.autosize = 'x';
gantt.exportToPDF({
raw: true
});
gantt.config.autosize = false;
gantt.$container.parentNode.style.width = '100%';
gantt.render()
Please check the following snippet:
https://snippet.dhtmlx.com/daszerbx
I’ve also noticed that when I have 100s of rows the lower onces are returning blank when exported.
I’ve tried to reproduce what you’ve described on this example:
https://snippet.dhtmlx.com/d77fsa8d
but it works correctly to me. It’s hard to suggest what exactly goes wrong without more details, so could you please provide me a detailed instruction on how to reproduce it or provide me a simplified demo?
Finally I have a second grid/timeline that shows holiday dates, but when exported the width of this grid does not match the width of the other.
To export the whole gantt markup as it is, with all custom elements, you can set the raw: true property in the parameter of the exportToPDF/exportToPNG methods. There is an article about it:
https://docs.dhtmlx.com/gantt/desktop__export.html#exportingcustommarkupandstyles
In addition, you can add styles to the header of the exportToPDF/exportToPNG methods so that the weekends will be highlighted in the exported file:
<style> gantt.exportToPDF({ name:"calendar.pdf", header:'<style>... custom css classes here ...</style>' }); </style.
If you have additional questions, write to us, and we will try to help you.
Thanks, Artyom. The autosize fix seems to work for smaller datasets.
Here’s what’s produced when I have more than one page (i.e. 100s of records). The image height is correct, in that it has given the vertical space for those records, but they’re simply not being rendered out in the export at all and the autosize fix doesn’t work with this volume of records either.
Here’s some of the different options I’ve tried:
var timeline = '.timeline_cell{width: ${gantt.$task_data.scrollWidth}px !important;}'
var marginStyle = ' .gantt_task_line.gantt_task_inline_color {margin-top: 10px;}'
var moneyStyle = ' .money_cell {position: absolute;text-align: center;background: #eee !important;pointer-events: none;color: #333333;border: 1px solid #d2d2d2;margin-top: 2px;font-weight: 600;line-height: 14px;}';
var monthStyle = ' .tarps_cell {position: absolute;text-align: center;background: #505050;pointer-events: none;color: white;border-radius: 3px;margin-top: 22px;font-weight: 500;padding: 1px;line-height: 15px;}';
//var start = new Date(gantt.getScale().min_date);
//var end = new Date(gantt.getScale().max_date);
gantt.config.smart_scales = false;
gantt.config.smart_rendering = false;
gantt.config.autosize = 'x';
gantt.exportToPNG(
{
header: "<style>" +timeline + marginStyle + moneyStyle + monthStyle + "</style>",
raw:true,
//start: start,
//end: end
}
);
gantt.config.autosize = false;
gantt.config.smart_rendering = true;
gantt.config.smart_scales = true;
gantt.$container.parentNode.style.width = '100%';
gantt.render()Finally, my export is already set to “raw: true” - this has not resolved the export issue regarding the holiday date calendar not aligning. Please see the comparison between what gets exported and what is viewed in the app. I want the width’s of the grid for the two to align as in the bottom picture when exported.
Hello,
Here’s what’s produced when I have more than one page (i.e. 100s of records). The image height is correct, in that it has given the vertical space for those records, but they’re simply not being rendered out in the export at all and the autosize fix doesn’t work with this volume of records either.
In that case, it is hard to suggest what might be wrong as I don’t see a full code. Please, add your configuration in the following snippet and make sure that the issue is reproduced there:
https://snippet.dhtmlx.com/40tsh9uz?text=gantt
Then, click on the Save button and send me the link.
Or send me a ready demo with all the necessary Javascript and CSS files so that I can reproduce the issue locally.
I want the width’s of the grid for the two to align as in the bottom picture when exported.
It seems that your grids have different sizes. You need to resize the second grid so that the timeline cells would be one under the other, just like in the gantt itself. One of the options is to check the width of the scrollbar for the first grid and add its scrollWidth value to the width parameter for the second grid:
.resourceGrid_cell{
width: ${document.querySelector(".gantt_hor_scroll").scrollWidth}px !important;
}
Please check the example of how it might be implemented: https://snippet.dhtmlx.com/8btt1tbz
Thanks mate - this is a bit messy, but I’ve tried to fit everything in here…
Hello,
Thank you for your snippet.
In case, where the size of timeline is increased only for export doesn’t work because you’ve got a custom gantt.config.layout. When you increase the width of the timeline with CSS, it doesn’t increase on its parent. So it’s better to use gantt.config.autosize = 'x' option.
In your snippet, you turn off smart_rendering before exporting, but for the changes to take effect, you need to redraw the gantt with the help of the gantt.render method:
https://docs.dhtmlx.com/gantt/api__gantt_render.html
Add the gantt.render before gantt.exportToPNG to export the whole Gannt.
Please check the following example:
https://snippet.dhtmlx.com/iq5z1xmv