Keeping grids width

Gantt
#1

hi there,

thanks in advance for helping me :slight_smile:

i’m trying to setup grid + gridtimeline + resourcegrid + resourcetimeline and i neew:

  • 2 horizontal scroll bars for taskgrid and resourcegrid
  • 2 vertical scroll bar for upper and bottom row
  • 1 horizontal scroll bar on the bottom for both timelines (task and resources)

I got everything on the example i attach but when i resize the upper grid of task the bottom grid of resources won’t resize to the same size … can you help me with this?

gantt.config.layout = {
css: “gantt_container”,
rows: [
{
cols: [
{
width:800,
minWidth: 400,
maxWidth: 1000,
rows:[
{view: “grid”, scrollX: “gridScrollHor”, scrollY: “scrollVerticalArriba”, scrollable: true},
// {view: “scrollbar”, id: “gridScrollHor”, group: “horizontal_izq”}
{view: “scrollbar”, id: “gridScrollHor”, group:“horizontal”}
]
},
{ resizer: true, width: 1 },
{
rows:[
{view: “timeline”, scrollX: “resourceTimelineScrollHor”, scrollY: “scrollVerticalArriba” }
,// { view: “scrollbar”, id: “timelineScrollHor”, group: “horizontal_der” }
]
},
{ view: “scrollbar”, id: “scrollVerticalArriba”, group:“vertical”}
],
gravity: 2
},
{ resizer: true, width: 10 },
{
config: resourceConfig,
cols: [
{
width:800,
minWidth: 400,
maxWidth: 1000,
rows:[
{ view: “resourceGrid”, scrollX: “resourceScrollHor”, scrollY: “resourceScrollVer” },
{view: “scrollbar”, id: “resourceScrollHor”, group:“horizontal”}
]
},
{ resizer: true, width: 1 },
{
rows:[
{ view: “resourceTimeline”, scrollX: “resourceTimelineScrollHor”, scrollY: “resourceScrollVer” },
{view: “scrollbar”, id: “resourceTimelineScrollHor”}
]
},
{ view: “scrollbar”, id: “resourceScrollVer”, group:“vertical”}
],
gravity: 1
}
]
};

#2

Hello Perry,
You need to group the column cells that have the grid views:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#visibilitygroups

Here is the updated layout configuration:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
        {
            cols: [
                {
                    width: 800,
                    minWidth: 400,
                    maxWidth: 1000,
                    group: "grids", // <= added group
                    rows: [
                        { view: "grid", scrollX: "gridScrollHor", scrollY: "scrollVerticalArriba", scrollable: true },
                        // {view: "scrollbar", id: "gridScrollHor", group: "horizontal_izq"}
                        { view: "scrollbar", id: "gridScrollHor", group: "horizontal" }
                    ]
                },
                { resizer: true, width: 1 },
                {
                    rows: [
                        { view: "timeline", scrollX: "resourceTimelineScrollHor", scrollY: "scrollVerticalArriba" }
                        ,// { view: "scrollbar", id: "timelineScrollHor", group: "horizontal_der" }
                    ]
                },
                { view: "scrollbar", id: "scrollVerticalArriba", group: "vertical" }
            ],
            gravity: 2
        },
        { resizer: true, width: 10 },
        {
            config: resourceConfig,
            cols: [
                {
                    group: "grids", // <= added group
                    width: 800,
                    minWidth: 400,
                    maxWidth: 1000,
                    rows: [
                        { view: "resourceGrid", scrollX: "resourceScrollHor", scrollY: "resourceScrollVer" },
                        { view: "scrollbar", id: "resourceScrollHor", group: "horizontal" }
                    ]
                },
                { resizer: true, width: 1 },
                {
                    rows: [
                        { view: "resourceTimeline", scrollX: "resourceTimelineScrollHor", scrollY: "resourceScrollVer" },
                        { view: "scrollbar", id: "resourceTimelineScrollHor" }
                    ]
                },
                { view: "scrollbar", id: "resourceScrollVer", group: "vertical" }
            ],
            gravity: 1
        }
    ]
};

And here is the snippet with that layout configuration:
https://snippet.dhtmlx.com/tmsubm11