Adjustment of Gantt chart attached to a tab

Gantt
#1

Hi,

In the following snippet :

https://snippet.dhtmlx.com/jj7z829m

If the layout containing the Gantt chart is attached to a tab (“PROJECT”), when the width of the layout cell “Gantt of portfolio” is increase (ou decrease) the Gantt chart don’t adjust to the new size of the layout cell.

On the other hand, if the layout is not attached to a tab, the Gantt chart adjust fine to the the layout cell resized.

Does anyone have a solution to this problem?

#2

Hello,
Gantt doesn’t have integration with Suite, so it doesn’t know that its container was resized and doesn’t repaint itself.
I added it as a bug to our internal tracker. The dev team will fix it in the future, but I cannot give you any ETA.

Now, as a workaround, you can add the following code to watch the container sizes:

var previousHeight = gantt.$root.offsetHeight;
var previousWidth = gantt.$root.offsetWidth;

function lowlevelResizeWatcher() {
  if (gantt.$root.offsetHeight != previousHeight ||
    gantt.$root.offsetWidth != previousWidth) {
    gantt.render();
  }

  previousHeight = gantt.$root.offsetHeight;
  previousWidth = gantt.$root.offsetWidth;

  setTimeout(lowlevelResizeWatcher, 20);
}
lowlevelResizeWatcher()

Here is the updated snippet:
https://snippet.dhtmlx.com/7upg0mtf

#3

Thank you ramil for your reactiv support

#4

Hello ramil,

I hadn’t seen that there was another problem !

When we display the content of another tab, for example PROGRAM, and go back to the gantt tab PROJECT, the Gantt chart is no longer displayed

#5

Hello,
You need to manually reinitialize Gantt when you return from that tab.
Here is the updated snippet:
https://snippet.dhtmlx.com/u9hrd51r

However, I think it would be better to use the Gantt instance approach:
https://docs.dhtmlx.com/gantt/desktop__gantt_instance.html

#6

Hello alain06

Please, try to reinit your your gantt after the selecting the “project” tabbar cell with the following code:

tabbar0.events.on("Change", function (activeId, prevId) {
    if (activeId == "project") {
        dhx.awaitRedraw().then(function () {
            var el = document.querySelectorAll(".dhx_layout-cell")[1]
            gantt.init(el)
        })
    }
    return true
});

Here is the example:
https://snippet.dhtmlx.com/fws5gb9i
as due to the shadow DOM usage the tabbar cell content is clearing from the page after deselecting the tab to clear the memory.

#7

Also, if you are attaching a component (layout in your case) to the dhtmlx container (tabbar in your case), you don’t need to define the parent container in the config for that component.

var layout = new dhx.Layout("layout", { // there is no "layout" container and it won't be used for the init of your layout
//so replace it with:
//var layout = new dhx.Layout(null, {
    width: "100%",
    height: "600px",
//...
})
tabbar0.getCell("project").attach(layout); // comment this line to eliminate the bug of gantt chart resizing

Here is the updated snippet as an example:
https://snippet.dhtmlx.com/nfddasby