addTaskLayer don't render element

Gantt
#1

Hello, I’m using gantt in Angular and trying to implement a baseline using addTaskLayer, but it doesn’t render the div element. I’m using gantt in version 8.0.1, in version 7.0.12 it worked fine.

My code:

dhtmlxGantt.attachEvent('onGanttReady', () => {
      this.baselineLayerId = dhtmlxGantt.addTaskLayer((task) => {
        if (task.startDatePlanned && task.endDatePlanned) {
          var sizes = dhtmlxGantt.getTaskPosition(task, task.startDatePlanned, task.endDatePlanned);
          var el = document.createElement('div');
          el.className = 'baseline';
          el.style.left = sizes.left - 6 + 'px';
          el.style.width = sizes.width + 10 + 'px';
          el.style.height = sizes.height + 6 + 'px';
          el.style.top = sizes.top + 1 + 'px';
         **// with console.log I saw the el, but it didn't render**
          return el;
        }
        return false;
      });
    });```
1 Like
#2

Hello Rafael,
I cannot reproduce that issue.
Here in the demo where I tried to do that:
https://files.dhtmlx.com/30d/e706b40958e83b459cf1c98396cc0c78/angular13+baselines.zip

If that doesn’t help you, please send me a ready demo with all the necessary files so that I can reproduce the issue locally.

#3

I’m using gantt in React. Also facing the same problem. It seems that the task layer is added before React render. And after React render, the task layer disappears

#4

Hello,
Here are React demos where React components are created using the addTaskLayer method:
https://files.dhtmlx.com/30d/48d93bafdc81fdd8a6853d280c23ace7/reactive-gantt+gantt-instance+addTaskLayer+react-components.zip

https://files.dhtmlx.com/30d/d0d4f6dda1572d1be89612b6eebabe7c/reactive-gantt+addTaskLayer-instead-of-task-bars.zip

I don’t see anything wrong with these demos.

If that doesn’t help you, it is hard to suggest what might be wrong as I don’t see your code. In that case, please send me a ready demo with all the necessary files so that I can reproduce the issue locally.

1 Like
#5

Thank you @ramil and your reply!
A few days ago, I suspect that the task layer not rendering is caused by the render mechanism of the React.

But today I found it is not so.

It is related to the calling order of gantt.init() and gantt.addTaskLayer(), especially when gantt.init() is called multiple times in the code.
In my code, the onGridResizeEnd event is listened, and after the event is received, the gantt.config.layout and gantt.init() is called.
And after the gantt.init(), the gantt.addTaskLayer() is forgotten to call .
So I changed my code, and call gantt.addTaskLayer() on every gantt.init(). Now it works fine.

And I found this post. According to this post, calling gantt.addTaskLayer() in onGanttReady is a better choice: