Same data line do not match

Gantt
#1

When scrolling to the bottom, the rows in the grid area and timeline area of the same data do not match.The version is 9.0.1

1743574625733
17435746257331586×428 47 KB

#2

Hello,
I tested this in version 9.0.1 but, unfortunately, couldn’t reproduce the issue. Could you add your configuration to this snippet DHTMLX - Gantt. Synchronize scrollbars so I can try to replicate it?

#3

I scroll the scroll bar in the task timeline area to the bottom, the scroll bar in the task grid area is not scrolled.

#4

Thanks for the help,
The configuration could be find in the demo of the snippet Layout views with own scrollbars,only scroll the timeline area to the bottom,this scene will appear.

#5

Hello,
It looks like your issue is caused by the timeline having a horizontal scrollbar while the grid does not. Here’s an example demonstrating this behavior: DHTMLX Snippet Tool.
A possible solution is to synchronize scrollbar visibility using the group property in the layout configuration (for example, by adding group: "horizontal" to each scrollbar view):

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            width: 400,
            rows: [
                {
                    group: "gantt",
                    cols: [
                        {
                            rows: [
                                { view: 'grid', scrollX: 'gridScrollX', scrollable: true, scrollY: 'gridScrollY' },
                                { view: 'scrollbar', id: 'gridScrollX', group: "horizontal" }
                            ]
                        }
                    ]
                }
            ]
        },
        ...
        {
            rows: [
                {
                    group: "gantt",
                    cols: [
                        {
                            rows: [
                                { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                                { view: "scrollbar", id: "scrollHor", group: "horizontal" }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
};

Here’s an example: DHTMLX Snippet Tool.

You can read more about this approach in the following article: Gantt Layout Gantt Docs