Moves to the top of the table when the template changes

Gantt
#1

I have templates for displaying task views, and I can also change their behavior using toggle.

  useEffect(() => {
    if (ganttContainerRef.current) {
      gantt.plugins(BASIC_PLUGINS)

      gantt.config = { ...gantt.config, ...config, ...editorsColumns }
      gantt.templates = { ...gantt.templates, ...templates }

      gantt.init(ganttContainerRef?.current)
    }
  }, [ganttContainerRef, config, templates, editorsColumns])

when I change the display of the template, I see them in the table, but the table does not remain in the same position as it was, but scrolls to the very beginning.

I also tried using gantt.resetLayout() but the behavior is the same.

How can I make the table remain in the same position and not scroll to the very beginning when changing templates?

#2

Hello Viktor,
Gantt doesn’t save the scroll position before the layout configuration is reset. And Gantt doesn’t scroll to that position after you reinitialize Gantt or use the resetLayout method.
You need to do it manually by using the Gantt API.

Here is an example of how it can be implemented:

gantt.attachEvent("onGanttReady", function () {
    gantt.scrollTo(gantt.$scroll_position.x, gantt.$scroll_position.y)
});

gantt.attachEvent("onBeforeGanttReady", function () {
    gantt.$scroll_position = gantt.getScrollState();
});

Here is the snippet:
https://snippet.dhtmlx.com/b3ybpc3n

#3

Great, Ramil! It works!