Gantt layout config

Joseph · September 25, 2019, 3:51pm

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.

ramil · September 27, 2019, 12:34pm

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.

Joseph · October 10, 2019, 4:04pm

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.

ramil · November 25, 2019, 2:02pm

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

Joseph · November 25, 2019, 3:13pm

Hi @ramil,

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

ramil · November 26, 2019, 9:02am

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

Joseph · November 26, 2019, 11:38am

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.

ramil · November 28, 2019, 11:40am

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.

Joseph · November 29, 2019, 1:03pm

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.

ramil · August 13, 2020, 4:21pm

Hello Joseph,
In the 7.0 version, the dev team added the grid_elastic_columns feature that allows making the grid scrollable and resizable:
https://docs.dhtmlx.com/gantt/whatsnew.html#x4591x70x4592x
https://docs.dhtmlx.com/gantt/api__gantt_grid_elastic_columns_config.html
I added that property to the snippet and updated Gantt to the latest version. Now, Gantt stretches the grid correctly in the fullscreen mode and when you manually resize the grid.
Here is the link to the updated version:
http://snippet.dhtmlx.com/5/abc84b06f

Joseph · August 14, 2020, 1:31pm

Hello @ramil,

This looks good with some exception.

On FS, there’s a black bar across

On non-FS (normal mode), task #29 is missing as well

Able to fix these?

ramil · August 19, 2020, 8:35am

Hello Joseph,
Thank you for informing about that. Looks like there are 2 tasks with the same ID:

    {id:52, text:"Task #29", start_date:"02-04-2013", 
    duration: 5, parent: 1, "progress": 0.25, owner_id: 124},

    {id:52, text:"Task #52", start_date:"02-04-2013", 
    duration: 5, parent: 31, "progress": 0.25, owner_id: 124},

It is not related to the fullscreen extension or layout configuration.

If you load several tasks with the same IDs, Gantt replaces the task objects but it seems to be working incorrectly. We are aware of the issue. The dev team will fix it in the future, but I cannot give you any ETA.

As a workaround, you need to add the following code to detect that there are tasks with the same ID:

  var duplicates = [];
  var ids = gantt.getDatastore("task").fullOrder.sort();
  for (var i = 1; i < ids.length; i++) {
    if (ids[i] == ids[i-1]) duplicates.push(ids[i])
  }
  if (duplicates[0]){
    gantt.message({text: "There are duplicate IDs in the task data: '" + duplicates.join() + "'. Check your dataset!",type: "error", expire: -1})
  }

Later you need to check your task data and change the duplicate IDs.
Here is the snippet:
http://snippet.dhtmlx.com/5/7cd39776a

Joseph · August 19, 2020, 2:14pm

Hello @ramil,

After I changed the duplicated id to other, it works perfectly from what I see.

Thank you very much

ramil · August 31, 2021, 12:14pm

Hello Joseph,

The dev team fixed the bug with the addTask, createTask, and parse methods:
https://docs.dhtmlx.com/gantt/whatsnew.html#71
Now, if you add a task with the ID of another task that is already loaded, that task will be replaced.
You can check how it works in the following snippets:
https://snippet.dhtmlx.com/5/55f78bb16
https://snippet.dhtmlx.com/5/4483be74c