Connection link between tasks gets disappear

Gantt
#1

Hi,

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)

Link-disappear-application-short
Link-disappear-application-short529×649 37 KB

Link-disappear-DHTMLX
Link-disappear-DHTMLX1026×801 125 KB

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

Thanks.

#2

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:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html#smartrenderingforcustomlayers

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:
https://snippet.dhtmlx.com/5lk3bt5o

#3

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…

Link-disappear-DHTMLX_on-View
Link-disappear-DHTMLX_on-View794×861 100 KB

#4

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:
https://docs.dhtmlx.com/gantt/api__gantt_getscrollstate.html

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:
https://docs.dhtmlx.com/gantt/api__gantt_datefrompos.html

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:
https://snippet.dhtmlx.com/5lk3bt5o