а

Gantt layout config


#1

Hi,

I am trying to find out how to make the change to display the horizontal scroll only at timeline side only.
While doing so, I notice something.

This is the config that I used

gantt.config.layout = {
  cols: [
   {
     // adding horizontal scrollbar to the grid via the scrollX attribute
     rows:[
      {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"}, 
      {view: "scrollbar", id: "gridScroll"}  
     ]
   },
   {resizer: true, width: 1},
   {
     rows:[
      {view: "timeline", scrollX: "scrollHor", scrollable: true, scrollY: "scrollVer"},
      {view: "scrollbar", id: "scrollHor"}
     ]
   },
   {view: "scrollbar", id: "scrollVer"}
  ]
};

Look at this snippet

Drag the resize towards the left, which will show a scrollbar for Grid but it looks like this.

Then I tested it at another snippet, with the exact same config.

And it looks correct now.

Any idea what’s the cause of this?

Coming back to my actual usage, is the config that I used above, the correct one to display separate scrollbar for both Grid and Timeline? Or is there any other way to write the config?

I was thinking if there is any API exposed to just write gantt.config.scrollbar = 'grid', gantt.config.scrollbar = 'timeline' or gantt.config.scrollbar = 'both' or something like that instead of having to write the entire layout config just to separate the scrollbar.

Thanks.


Also, take a look at this snippet

If only the Timeline has the scrollbar, then it will look like this. It should be align properly and the Timeline scrollbar should not be not top of the #60 Chart.

And, do click on the FS button which will expand to the fullscreen mode, and it will look like this. A block of black space in between.

I tested it on Chrome and Edge, and both are the same.


#2

Hello Joseph,

Drag the resize towards the left, which will show a scrollbar for Grid but it looks like this.

It happens because of a known bug. It will be fixed in future updates.
Now, as a workaround, you can reinitialize Gantt and do it every time when the grid height changes:
http://snippet.dhtmlx.com/e17f0b7e7


Then I tested it at another snippet, with the exact same config.

And it looks correct now.

Any idea what’s the cause of this?

It works correctly in that snippet because it has the older Gantt version that doesn’t have that bug:


Coming back to my actual usage, is the config that I used above, the correct one to display separate scrollbar for both Grid and Timeline? Or is there any other way to write the config?

I was thinking if there is any API exposed to just write gantt.config.scrollbar = ‘grid’, gantt.config.scrollbar = ‘timeline’ or gantt.config.scrollbar = ‘both’ or something like that instead of having to write the entire layout config just to separate the scrollbar.

Also, take a look at this snippet

If only the Timeline has the scrollbar, then it will look like this. It should be align properly and the Timeline scrollbar should not be not top of the #60 Chart.

There is no API property or method to hide or show the scrollbar for the grid and the timeline. But you can remove the scrollbars by using the autosize option:
https://docs.dhtmlx.com/gantt/api__gantt_autosize_config.html

If you want to see the scrollbar only below the timeline, you need to remove the scrollbar for the grid. It will work, but in that case, the bottom task will be behind the scrollbar, as you already posted:

It happens because the timeline and the grid are located inside the layout cells that have a different size. For example, if Gantt has the horizontal scrollbar only for the grid, the rows will be misaligned:



If Gantt shrank the timeline, the rows would always be misaligned.

So, the issue is related to different layout cell sizes. You need to add a scrollbar to the grid to have equal layout cells. Although the grid may not need the scrollbar, it should be displayed there. That can be done by linking horizontal scrollbars into one group:


http://snippet.dhtmlx.com/3d929f340
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#visibilitygroups


And, do click on the FS button which will expand to the fullscreen mode, and it will look like this. A block of black space in between.

Looks like, you need to add the following code to have the white color:

css: "gantt_container",

The blank space appears there because Gantt tries to expand the grid. As it has the scrollable: true parameter, it has a fixed width. So, when Gantt tries to expand it there is nothing to display.
I added it as a bug in our internal tracker, as Gantt shouldn’t try to expand the grid when it has a fixed size.


#3

Hi @ramil,

Sorry for missing out on this.

Thanks for acknowledging the two issue, and hope that these can be solved in the upcoming release.

I have managed to change the configuration so that both grid and chart are aligned with the scrollbar, and I think it is good for now.