Link is not displaying if either source task or target task is hidden


#1

Hi,

I’m trying to show the link even if either the source task or target task is hidden in the chart.
Now it seems that the link is not shown when either of those is not visible.
“onBeforeLinkDispaly” does not help me solve this issue as the links have already been filtered before the event is called. I’ve found “onFileterItem” event for linksStore and change the code not to filter the link if either source or target is visible but then the link shows in a wrong way as below:

You can see most of the links go up as the target tasks(which have been on the bottom of the chart) are hidden on the chart. How can I fix this problem?

Thanks.


#2

Hello,
First, we need to define the expected behaviour as there might be several scenarios. Is the task hidden because its parent collapsed, or it is not displayed in the chart at all (outside the date range or hidden in onBeforeTaskDisplay event handler)? Or maybe there is a link, but the task doesn’t exist.
How do you imagine it should work for all cases?


#3

Hi,

I understand what you’re saying. It could be difficult to find the way that works for all cases.
In my scenario, I filter the tasks by $index so that the chart can show certain number of tasks(ex| 50 tasks) using “onBeforeTaskDisplay”:

gantt.attachEvent("onBeforeTaskDisplay", function(id, task){
     if (isExporting) {
          return (0 <= task.$index) && (task.$index < 50);
     }
     return !task.$ignore;
});

In this case, if the task to be shown has a link to the task to be hidden, the link cannot be displayed.
What I’m trying to do is export to PDF with multiple pages when the chart has big amount of tasks.
When you have around 500 tasks, you could hardly see the chart in a page where all the tasks are displayed.
So I’d like to break down into 50 tasks for each page and there should not be anything hidden unless the task or the link is not in the selected date range.

I don’t want to push you to get a solution right now. I’m just trying to brainstorm to get closer to how I can solve this issue. I’ve tried to modify the code for rendering the links but it was hard to draw the line end to the hidden task(or started from the hidden task or both source and target are hidden). Especially for the case that both source and target task are hidden, it’s hard to check if the link should be shown. I think I need to think more about how I can decide whether the link should be displayed or not.

+> Is there any way to hide overflow part on the chart area when exporting? I’m trying to draw the links but the problem is it just extends the chart and the arrow is also displayed. The picture below is the result from setting the source/target task to the last task of visible tasks if the source/target task is not visible. I think I can increase y value to show only vertical line (without arrow and horizontal line) but it could be possible only if the overflow part is hidden.

Thank you :slight_smile:


#4

Hello,
Thank you for the clarification.
it is possible to export the data within the date range. But it is horizontal selection, not vertical. It is possible to use an object with tasks (“data” parameter):
https://docs.dhtmlx.com/gantt/desktop__export.html#datatoexport

We have the “additional layer” feature:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html
You can try to add a 51st task that will be visible in the chart, add a layer to that task and draw everything inside that layer. To display only the vertical line, you can use markers:
https://docs.dhtmlx.com/gantt/desktop__markers.html
But it is a really custom solution, so I cannot give you an example.

If you want to hide the overflow part of Gantt, you need to hide all div elements of Gantt that overflow. But I think it is possible to get the links of the bottom task and save it in an object. The last 2 elements of the link node are the link arrow and the horizontal line. Sometimes, there is an additional horizontal line if the link is too long. So you can hide those elements.
Here is an example:
http://snippet.dhtmlx.com/8b843bb19