How to control horizontal scroll

Gantt
#1

Hi,

I have a template with grid and timeline:

{
    "css": "gantt_container",
    "cols": [
        {
            "min_width": 300,
            "rows": [
                {
                    "view": "grid",
                    "id": "grid",
                    "scrollX": "gridScroll",
                    "scrollable": true,
                    "scrollY": "scrollVer",
                    "width": 50
                },
                {
                    "view": "scrollbar",
                    "id": "gridScroll",
                    "group": "horizontal"
                }
            ],
            "width": 1016
        },
        {
            "resizer": true,
            "width": 1
        },
        {
            "rows": [
                {
                    "view": "timeline",
                    "scrollX": "scrollHor",
                    "scrollY": "scrollVer",
                    "width": 50
                },
                {
                    "view": "scrollbar",
                    "id": "scrollHor",
                    "group": "horizontal"
                }
            ]
        },
        {
            "view": "scrollbar",
            "id": "scrollVer"
        }
    ],
    "id": "main"
}

When using gantt.scrollTo(), I seem only able to control the vertical scroll.

How to go about controlling the horizontal scroll for the Grid and for the Timeline?

Thank you

#2

Hello Karl,
In your configuration, the grid and timeline have different horizontal scrollbars and a common vertical scrollbar. So, when you use the scrollTo method, the timeline is scrolled vertically and horizontally, and the grid is scrolled only vertically. This is expected behavior.

I added your configuration to the following snippet, and when I enter the coordinates, the scrolling works as expected:
https://snippet.dhtmlx.com/vfk8nuxg

If you want to horizontally scroll the grid, you need to use the scrollLayoutCell method:
https://docs.dhtmlx.com/gantt/api__gantt_scrolllayoutcell.html

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

1 Like