Grid width not rendering correctly

Gantt
#1

Hi,

I found a odd behavior on the grid width when switching from show_chart = false to show_chart = true.

Please get a copy of the sample from my GitHub.

Once the application has started, click on Show and you will immediately notice the lag in width of the grid.
However, if you click on the Show to hide the chart and show again, the lag is gone but there is still a subtle width “jumping” issue.

Any idea what is the issue?

Thanks!

#2

Hi @Joseph!

I’m looking into this. I don’t have any solution yet, will need some time to debug your sample and find out why grid sizes behave that way

#3

Hi @guldmi,

Appreciate that. Let me know if you need anything else to assist you with.

I’ll update here if I manage to find anything new as well.

It’s affecting our UI now, so if I need to file a ticket for quicker response, do let me know.

Thank you!

#4

Hi, @Joseph!

I think you need to pass a display prop from React.memo defined here https://github.com/josephstgh/react-gantt-hook-demo/blob/27fe9f10edf91ae57ab3e7ca60efc78c1a0d3de0/src/GanttChart.js#L19
to the second argument of useEffect at this line https://github.com/josephstgh/react-gantt-hook-demo/blob/27fe9f10edf91ae57ab3e7ca60efc78c1a0d3de0/src/GanttChart.js#L92

}, [display]);

Not using it caused redundant re-initializations and repaints of Gantt (explained here https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect ), which I think was responsible for jumping grid width.
After I change it, the Gantt is re-initialized only when the display changes and only the problem seems gone.

#5

Hi @guldmi,

Thanks for the pointer. I just tried it, and it seem to have fixed the issue but doesn’t make much sense to me though.

That is the reason why I put it as [] which only initialize when the component mount and unmount which means that gantt on paint once when the component is mounted. And if you look further below, I have another effect which has [display] as the dependency which only update show_chart whenever display props changes.

Placing [display] on the useEffect section that you mentioned meant that everytime display props changes, re-init gantt, together with all the config I set inside the useEffect.

If you have a different understanding, please let me know.

Thank you though, for the investigation.

#6

Hi,

I revisited this issue recently, and still having some issue/concern with this.

If I put display in the dependency then it will “solve” the width jumping issue.
But it will cause another issue.

useEffect(() => {
  gantt.config.show_chart = display;
  gantt.init('gantt');
}, [display]);

The issue is that imagine you scroll half way down the list (50th of 100 tasks), and currently display is true which means you are halfway, and the chart is shown.
Now, the display is set to false which will hide the Chart but current scroll state will jump back to the first task.

I suspecting that it is because I am re-init the gantt again due to the display change because display is init together with init.

Any solution to this?

#7

Hello Joseph,
It is possible to keep the scroll position if you parse the data by disabling the following property:

gantt.config.initial_scroll = false;

https://docs.dhtmlx.com/gantt/api__gantt_initial_scroll_config.html

But when you reinitialize Gantt, it doesn’t save the scroll property anywhere.
So you can save the scroll position before reinitializing Gantt and scroll to that position after the reinitialization.
Here is the snippet:
http://snippet.dhtmlx.com/f59707829