а

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.


#4

Hello Joseph,
The dev team fixed the bug when the grid wasn’t correctly resized after changing the size of the Gantt container:
https://docs.dhtmlx.com/gantt/whatsnew.html#627
You can test that it works correctly in the following sample:
https://docs.dhtmlx.com/gantt/samples/07_grid/10_scrollable_grid.html


#5

Hi @ramil,

Thanks for the update, but I suppose the full screen bug is not fixed yet right?


#6

Hello Joseph,
Looks like the blank space appears there not only when you enter the fullscreen mode. It appears if you increase the Gantt container size. However, if you set the layout cell width, the grid won’t be resized.
You can also add the following style rule and you will see empty rows instead of the blank space:

<style>
.gantt_row, .gantt_grid_data, .gantt_grid_scale {
  min-width: 100%
}
</style>

Here is the snippet that demonstrates how it works:
http://snippet.dhtmlx.com/a17105057


#7

Hi @ramil,

Which one are you referring to?

Will gantt library have a fix? or is this overriding the style min-width the proposed solution?

Thanks.


#8

Hello Joseph,

if you set the layout cell width, the grid won’t be resized

Which one are you referring to?

I mean the width parameter of the layout cell:


You can also add the following style rule and you will see empty rows instead of the blank space:

Will gantt library have a fix? or is this overriding the style min-width the proposed solution?

The dev team suggested that it can be used as a solution, however, they haven’t decided if that should be the fix or there is something missing.

When the grid has the scrollable parameter, Gantt doesn’t stretch the grid and makes it scrollable by showing the scrollbar. So the grid width is fixed. When you increase the width, there is nothing to display.
I think that in this situation Gantt shouldn’t increase the grid width when entering the fullscreen mode or increasing the size of the Gantt container. And the proposed solution helps to fix that.
If you think that it should work in a different way, please share your opinion about that situation.


#9

Hi @ramil,

I think the current proposed solution is good enough. However, if the dev team decided to fix it in the library, do notification in this thread so I can remove the current proposed solution.

I haven’t go it a go yet, but will do so soon. Will feedback if there is any issue.

Thanks.