Gantt Grid and Timeline Vertical Scrolls

Gantt
#1

Hi is there a way to display two vertical scrollbars in both gantt grid and timeline ? As shown in the image (highlighted in yellow) ?

image
image1071Γ—499 27.5 KB

#2

Hello,
You can configure gantt.config.layout to add a scroll to the grid:

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

A function to synchronize scrolls might look like this:

gantt.attachEvent("onDataRender", () => {
    const scrollbar1 = document.querySelector(".gridScrollY_cell").firstChild.firstChild;
    const scrollbar2 = document.querySelector(".scrollVer_cell").firstChild.firstChild;
    scrollbar1.addEventListener('scroll', e => {
        scrollbar2.scrollTo(0, scrollbar1.scrollTop);
    });
    scrollbar2.addEventListener('scroll', e => {
        scrollbar1.scrollTo(0, scrollbar2.scrollTop);
    });
});

Here is an example in the snippet: https://snippet.dhtmlx.com/ktm60ec6.

1 Like
#3

Worked like a charm, many thanks.

1 Like