Gantt toggle makes custom links disappear

Gantt
#1

Hi,

I’m using gantt Toggling to show gantt-chart and gantt-layout.
And used addTaskLayer function to render all the custom-links(SVG images) in Gantt.

When I do click on “toggle!” button and revert back to chart-view, all the links gets disappear.
Here is the snippet…
https://snippet.dhtmlx.com/u9rdz2oa

made a call to gantt.render() but it doesn’t work for me.
Is there any workaround for this?

#2

Hello Dhananjay,
The additional task layers are removed when you call the init or resetLayout methods:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html#:~:text=Beware%2C%20custom%20layers,reset%20custom%20layers

You need to put the addTaskLayer method inside the onGanttReady event handler:
https://docs.dhtmlx.com/gantt/api__gantt_onganttready_event.html

Here is the updated snippet:
https://snippet.dhtmlx.com/r29czzb8

#3

Hi Ramil,

Thanks for your reply.

Can I write the custom elements code from renderer method to outside the addTaskLayer(). And just make a call to it from inside the renderer.
Like…
…
gantt.addTaskLayer({
renderer: {
render: function (task, selectedLinkElement, selectedLinkID, linkClick) {
renderLinks(task, selectedLinkElement, selectedLinkID, linkClick);
},
…
Please suggest me, what is the correct approach to write it.
https://snippet.dhtmlx.com/hps8p8fg

#4

Hello Dhananjay,
In the render function, you need to return an HTML element if you want to render it:
https://docs.dhtmlx.com/gantt/api__gantt_addtasklayer.html#:~:text=renderer%3A%20{-,render%3A%20function%20(task%2C%20timeline%2C%20viewport)%20{ %20%20%20%20%20%20%20%20%20%20%20%20... %20%20%20%20%20%20%20%20%20%20%20%20return%20%20HTMLElement %20%20%20%20%20%20%20%20}%2C,-getRectangle%3A%20function

In the snippet, you don’t return anything, so, it should be expected that custom HTML elements are not rendered.
To make it work, you need to change these lines:

render: function (task, selectedLinkElement, selectedLinkID, linkClick) {
  renderLinks(task, selectedLinkElement, selectedLinkID, linkClick);
},

to these ones:

render: function (task, selectedLinkElement, selectedLinkID, linkClick) {
  return renderLinks(task, selectedLinkElement, selectedLinkID, linkClick);
},