Distortion in grid while scrolling

[sweeti]

While scrolling to the bottom there is a distortion in grid. Please suggest the possible solution.

Thanks

[ramil]

Hello Sweeti,
It happens because there is a scrollbar in the grid, but the timeline doesn’t have the scrollbar.
You can add both horizontal scrollbars and use the “group” parameter, so that Gantt will show both scrollbars if at least one is required and won’t show any scrollbars when they are not required:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#visibilitygroups
Here is an example of how it might be implemented:
http://snippet.dhtmlx.com/1ed31cb6e
Or you can add the scrollbar to the grid and to the timeline so that each scrollbar will affect only its own view:
http://snippet.dhtmlx.com/9a9e258fa

[sweeti]

Thank you for the solution. It is working.

[sweeti]

I am having one more issue with the grid and timeline. There is some gap between it,

[ramil]

Hello Sweeti,
Looks like it happens because there is scrollable: true parameter in the grid layout config.
If you remove that parameter, Gantt will extend columns, although it looks ugly when you set too small size:
http://snippet.dhtmlx.com/fc7fe7b15
You can use “onGridResizeEnd” event handler to override user’s actions:
https://docs.dhtmlx.com/gantt/api__gantt_ongridresizeend_event.html
If new grid width is greater than the predefined grid_width, the grid resize will be cancelled:
http://snippet.dhtmlx.com/28a4931bf
If you want to extend the grid width to maximal value instead of cancelling the resize, the easiest way is to reinitialize Gantt:
https://snippet.dhtmlx.com/a482a394d

[sweeti]

Hi,

I have created a milestone for the project, but it is only available in when the gantt chart is in day format, for any other formats it is not available.

Thanks

[ramil]

Hello Sweeti,
It might be related to Gantt configuration. If I use the work_time option and change the scales, the milestone is still displayed:
http://snippet.dhtmlx.com/70e095c79
Please reproduce the issue in the snippet.

[sweeti]

Hi,

Problem here is not about the milestone, but about the Project Milestone where you can see the red vertical line, that is only visible in day format and not in year format, please refer the above screen shot.

Thanks

[sweeti]

Hi,

I want a vertical red line on a random date (24-September-2018)*, when the Gantt chart is on Month and Year format.

*Date is dynamic.

[ramil]

Hello Sweeti,
Unfortunately, I couldn’t reproduce it with the vertical marker:
http://snippet.dhtmlx.com/ffbf82159
Please reproduce the issue the snippet so that I can see what might be wrong.

[sweeti]

Hi Ramil,

I am trying to implement your solution but In the licensed version I am getting a error.

I have included “assets/scripts/gantt_6.0.2_enterprise/codebase/ext/dhtmlxgantt_marker.js” under scripts in angular-cli.json

[ramil]

Hello Sweeti,
It might happen because of Gantt types. If you have Angular 2.x, you can add the following string into gantt.component.ts file:

import {} from '@types/dhtmlxgantt';

If you have Angular 5.x+ you need to install the types manually:

npm install @types/dhtmlxgantt@^6.0.0 -save-dev

After that, open angular-project-folder/src/tsconfig.app.json file and include “dhtmlxgantt” inside the “types” array:
https://github.com/DHTMLX/angular2-gantt-demo/blob/master/src/tsconfig.app.json#L6

To connect any extension open gantt.component.ts file and add the path to the extension after import 'dhtmlx-gantt';. For example:

import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker';
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_auto_scheduling';

Screenshot

Here is the demo with the marker:
https://files.dhtmlx.com/30d/410f107932a0a824804a6a090233027f/angular7+gantt.zip
After downloading it, install node modules and add the Pro version:

npm install "path to unpacked Gantt folder with codebase folder and package.json file"

[sweeti]

Hi,
We are using licences version of dhtml in our angular4 project. We want to use adMarker feature of gantt chart.
But its showing error addMarker is not a function.
We have put the codebase under - \src\assets\scripts\gantt_6.0.2_enterprise\codebase
and we are accessing the path by mentioning it under scripts array in angular-cli.json file.
Same way we are using licence version codebase and everything is working fine.

We do not want to use nodemodule and import way as we are using all third party libraries as well as dhtml like this way.

Please suggest your solution.

[ramil]

Hello Sweeti,
Thank you for the clarification.
Please send me the angular4 project with Gantt so that I can check how it works in your case, and I will try to find a way to make Gantt and its extensions work.