Horizontal scrollbar in grid

Gantt Vue.js Gantt
#1

Hi everyone,
I use the gantt chart with my VueJs application. I want to show the horizontal scrollbar both in the grid and in the timeline. But It show only one scrollbar. Here is my config code:

        gantt.config.grid_elastic_columns = true;
        gantt.config.min_grid_column_width = 1;

       // show horizontal scrollbar in grid area
        gantt.config.layout = {
            css: 'gantt_container',
            cols: [
                {
                    width: 500,
                    min_width: 300,
                    rows: [
                        {
                            view: 'grid',
                            scrollX: 'gridScroll',
                            scrollable: true,
                            scrollY: 'scrollVer',
                        },

                        // horizontal scrollbar for the grid
                        { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
                    ],
                },
                { resizer: true, width: 1 },
                {
                    rows: [
                        { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },

                        // horizontal scrollbar for the timeline
                        { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
                    ],
                },
                { view: 'scrollbar', id: 'scrollVer' },
            ],
        };
        gantt.config.keep_grid_width = true;

and code to config my columns, I have a lot of columns, but I will show you 2 of them because it’s too long and it’s all the same with 2 columns.

             [{
                name: 'calendarName',
                label: t('planning.gantt.columns.calendarName'),
                min_width: 100,
                resize: true,
                hide: true,
            },
            {
                name: 'parent',
                label: t('planning.gantt.columns.parentId'),
                min_width: 150,
                resize: true,
                template: (task: IGanttChartTask) => {
                    return task.parent ? task.parent : '';
                },
                hide: true,
            },]

I don’t know what wrong I am doing.

#2

Hello,
You need to disable gantt.config.grid_elastic_columns config to prevent resizing the columns width. So the columns in the grid will have the required width, which is set in the columns config and there will be horizontal scrollbar:
https://docs.dhtmlx.com/gantt/api__gantt_grid_elastic_columns_config.html ;
Please check the example in the following snippet:
https://snippet.dhtmlx.com/7hd9vm7x