Connection link between tasks gets disappear


I’m trying to show the link even if source task is hidden in the Gantt chart.

As I draw the customized links with SVG images,
If I slowly scroll up-down the scrollbar and the task row from the chart gets hide on Gantt page, then the connection link starting from same row, gets disappear.
I observed the same behavior on DHTMLX Sample, sharing the sample link here…

[Gantt : Samples](Draw links as SVG images)

Please suggest better way that we can show the link even if source/target is hidden in Gantt chart.


Hello Dhananjay,
The additional task layer elements are rendered only when the relevant task row is rendered. To change how it works, you need to switch to the configuration object instead of the function and add the getRectangle and getVisibleRange methods:

In the getRectangle method, you need to add the coordinates of the element for the smart rendering.

Here is an example of how it can be implemented:

Thanks! Ramil

I observed, if I do scroll up-down and one of the task(either source or destination) is on Gantt current-view then only link is visible but if neither one from both is on Gantt current-view then link gets disappear.

What is the better way to show the link, even when source and destination both task are not visible on Gantt current-view but link is exists between them…

Hello Dhananjay,
I didn’t consider that scenario. If you want to display the link even when the tasks are not visible, but the relevant area of those tasks is inside the viewport, you will need to check several things. The easiest one is the viewport dates. You can obtain the left viewport position from the scroll position:

For the right viewport position, you need to add the offsetWidth parameter of the timeline element to the scroll position.
To get the dates, you need to convert the timeline position with the dateFromPos method:

Then you will need to get the indexes of the rendered tasks. There is no ready method for that, and iterating all tasks each time Gantt repaints the data can affect performance. So, instead of that, you can obtain the DOM elements. It is possible to get the task IDs from them and their indexes. After that, you can get the minimal and maximal rendered index. Then, when you iterate tasks, you can compare the dates and indexes to define if the link elements should be rendered.
Here is the updated snippet: