Setting autosize to 'y' has some side effects

Gantt
#1

Hi, I’m using gantt.config.autosize = ‘y’ to export to PDF properly but found that if I set it, showTask(id) doesn’t work which I really need to use. So I’ve tried not to use autosize but it has also a problem with exporting.

If I export the chart to PDF with gantt.config.autosize = false, there is an empty space below and some tasks are hidden. I think the height of data inside the chart seems to be calculated by the gantt dom’s height at the moment I’m exporting with gantt.config.autosize = false due to {raw: true}.

empty_space_bottom
empty_space_bottom1508×306 16 KB

I should keep both: gantt.config.autosize = false and {raw: true}, so I’ve tried to set autosize to ‘y’ then render the chart before calling the function for exporting to PDF but it makes the height of the PDF page same as the whole chart height. Is there any way to keep both functionalities: Setting the height of the exported PDF depending on the number of tasks & Using showTask(id)?

Thanks

#2

Hello Birdie,
Thank you for reporting about the issue with the autosize option. I added it in the tracker, and the dev team will fix it in the future. I cannot give you an ETA, but I will notify you when the fix is ready.

Now, as a workaround, you need to set that parameter before exporting the data then change it to false after that. Here is an example:
http://snippet.dhtmlx.com/89423f4c4

#3

Hello Birdie,
The dev team investigated the use case. It seems that there is no proper way to fix that.

In the regular mode, Gantt scrolls itself when you use the showTask method.
When autosize is enabled, Gantt increases its container size. So, now, it should scroll the page instead to show the task.

In a simple configuration, Gantt may be located before or after some elements in your application. And it will work correctly if you scroll the page.
In a complex configuration, the Gantt container may be included in other containers and they can also be included in some other containers. If Gantt scrolls each parent container and the page, it may not work as you expect. For example, Gantt will scroll some containers you didn’t want to scroll.

So, this problem should be solved depending on the page/application configuration.
The easiest way is to use the element.scrollIntoView method:

  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
  if(timelineElement)
     timelineElement.scrollIntoView({block:"center"});

Where id is the task ID you need to show.

Another way is to modify the showTask method:

var showTask = gantt.showTask;

gantt.showTask = function(id){
  showTask.apply(this, [id]);
  var attr = gantt.config.task_attribute;
  var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
  if(timelineElement)
     timelineElement.scrollIntoView({block:"center"});
};

or create a custom function to show the task:

function showTask(id){
    gantt.showTask(id);
    var attr = gantt.config.task_attribute;
    var timelineElement = document.querySelector(".gantt_task_line["+attr+"='"+id+"']");
    if(timelineElement)
       timelineElement.scrollIntoView({block:"center"});
}

Here is an example:
http://snippet.dhtmlx.com/5/71a70c1d0

In the future, we’ll add that information to the documentation.