Exported in PDF format, the gantt diagram does not show color

Exported in PDF format, the gantt diagram does not show color
I also configured raw: true, but the export still has no color



This is my example on github:

Hello Qian,
You need to include the styles inside the header or footer parameter:
https://docs.dhtmlx.com/gantt/desktop__export.html#customstylefortheoutputfile
Here are examples:
http://snippet.dhtmlx.com/5/b7ef7c6bc
http://snippet.dhtmlx.com/5/9288a27ec

1 Like

wao~thank you so much~
Export is now normal

hello,i have a another question


When I want to drag left and right to adjust the width, I find that it is not good. How should I set it? The example is still the gitbug example above

Hello Qian,
The issue occurs because of the layout configuration. It can be reproduced even in our snippets:
http://snippet.dhtmlx.com/5/b780de836

You made the grid scrollable but didn’t specify the horizontal scrollbar (scrollX). If you don’t need it, you can disable the scrollable parameter.
Here is an example:
http://snippet.dhtmlx.com/5/a97bd27e9

Thanks, I tried it and it worked. But I have another question. I want to set a width for the left side. Why is gantt.config.grid_width not working? Because the content on the left is too long, I want to set a width, a horizontal scroll bar appears, but it seems that gantt.config.grid_width does not work

Hello Qian,
The grid width depends on several parameters, each of them has a different priority:
• When initializing gantt via gantt.init(), the width of the column is a priority.
• When rendering gantt via gantt.render(), the grid_width is a priority.
• When initializing gantt via gantt.init() and either the width of the column is not specified or is set to ‘*’, the grid_width is a priority.
https://docs.dhtmlx.com/gantt/api__gantt_grid_width_config.html

So, you need to manually increase the width of the columns in the configuration.

Here is the updated snippet:
http://snippet.dhtmlx.com/5/1c5b8af5e

The horizontal scrollbar in the snippet is attached to the timeline views, so, the grid won’t be scrolled.
If you want to set the scrollbar for each view, you need to create a complex layout:
https://snippet.dhtmlx.com/5/70482b483
Unfortunately, if you have complex layouts, there is no way to synchronize both the width and height of the views. The dev team will fix that bug in the future, but I cannot give you any ETA.

Thank you very much for your answer, the current function meets my current needs.
The bug you mentioned is that when I adjust the height up and down, the adjustment cannot be synchronized. Is this a bug?

Hello Qian,
Yes, it is that bug that you cannot synchronize the width or height of the views if you have a complex layout.

Thank you, after this bug is fixed, would you mind sending me a new version? Our company no longer continues to purchase this product, can I enjoy the follow-up guarantee service?

Hello Qian,
Please, contact the Sales team to discuss that question:
contact@dhtmlx.com
They will also need your license ID.

Thank you, I will consult later

Hello, I have a question for advice. When the width and height of my external div change, how does gantt adapt the width and height according to the change of the external div size?

Hello Qian,
Gantt will try to adapt to the sizes of its container.
In the following snippet, you can try resizing the horizontal part between the code and the result. That will change the horizontal container size and Gantt will shrink or expand horizontally:
https://snippet.dhtmlx.com/5/38ee1b370
In the following snippet, you can change the vertical size of the Gantt container:
https://snippet.dhtmlx.com/5/7c43ad64b

Hello, I have a question. I am using the pro version of 7.1.5.When I use the complex layout you posted above and configure resize: true in the column settings, why can’t I change the width?Is there a problem with where I set it up?
columns: [
{ name: “projectCode”,label: “project”,width: “*”, resize:true,align: “center”,min_width: 150},
{ name: “stageName”, label: “stagename”, resize:true,align: “center” ,min_width: 200,},
{ name: “name”, label: “name”, resize:true, align: “center” ,min_width: 200,}]
gantt.config.grid_elastic_columns =true
gantt.config.min_column_width = 50
gantt.config.keep_grid_width = false;
gantt.config.grid_resize = true


And when I export with a complex layout, there will be a blank in the upper part of the exported pdf
How should I configure so that there is no blank? And the data on the right side is incomplete。Do I need to upload an example to github for your reference?

Hello Qian,
I tried adding part of your configuration to the snippet:
http://snippet.dhtmlx.com/5/0fd91d6b6
If the grid part has enough width, the column resize should work. And if I export the data, the right part is still stretched without empty space.

You can add your configuration to the snippet, make sure that the issue is reproduced, and send me the updated snippet.

Hello Qian,
The dev team fixed the bug with the grouped view. Now, when you resize a grouped view, the other grouped view will have the same width or height. The fix was added in the 7.1.6 version.

You can check how it works in the following snippet:
https://snippet.dhtmlx.com/cv9w37tu

In your case, the issue was related to the wrong layout configuration. When you group a view, there should be some symmetry if you want to group views. In other words, it is expected to group the views on the same parent cell type (rows or cols). It should work correctly when both cells are located inside rows[cols[rows]] cell. It won’t work correctly when one view is inside the rows[cols[rows] cell and the other is in the rows[cols] cell.