Gantt chart - Vertical and Horizontal scroll - Not able to achieve

Gantt
#1

Dear Community,

We are from FlexiDigit Technologies. We have purchased the Pro version of DHTMX.

We are not able to develop the Horizontal and Vertical Scroll, particularly for Gantt chart area through DHTMLX.

We are facing below bottlenecks on Development.

  1. Gantt chart vertical scroll to gantt chart area - not able to achieve
  2. Gantt chart - layout height - not able to set fixed height.
  3. Gantt chart - Pro version - ‘Zoom’ library is not available.

Please support us regarding the above mentioned bottlenecks.

Thanks & Regards,
Ramkumar P
Business Analyst
FlexiDigit Technologies

#2

Hello,

  1. To implement the horizontal and vertical scroll, you can use the gantt.config.layout property where you can define a custom layout for your Gantt chart and add horizontal and vertical scrollbars.

To add scrollbars in the layout configuration, you need to define a layout that includes scrollbar views and connect them to the grid and timeline using the scrollX and scrollY properties.
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#scrollbar
https://docs.dhtmlx.com/gantt/desktop__specifying_columns.html#horizontalscrollbar

Below is an example of how to create a vertical scrollbar shared by both the grid and timeline, and a horizontal scrollbar for the timeline:

gantt.config.layout = {
  css: 'gantt_container',
  rows: [
    {
      cols: [
        {
          rows: [{ view: 'grid', scrollY: 'scrollVer' }],
        },
        { resizer: true, width: 1 },
        {
          rows: [
            { view: 'timeline', scrollY: 'scrollVer', scrollX: 'scrollHor' },
            { view: 'scrollbar', id: 'scrollHor' },
          ],
        },
        { view: 'scrollbar', id: 'scrollVer' },
      ],
    },
  ],
};

In the example above, we bound grid and timeline views to the same vertical scrollbar. This way, when we scroll the vertical scrollbar, the grid and timeline are scrolled together. If needed, you can also configure separate scrollbars for each view.

Please check examples of layout configuration:
https://snippet.dhtmlx.com/tazhpqlf

  1. To set the height of the Gantt chart, you need to set the height of the container element. After initializing Gantt, it will fully occupy its container.

Here’s an example with the Gantt chart height specified as 300px: DHTMLX Snippet Tool.

  1. The Zoom feature is not a separate library but a built-in module of DHTMLX Gantt. To enable the module, you need to call gantt.ext.zoom.init(zoomConfig) and pass a zoomConfig object with configuration settings that contains an array of zooming levels.
    Zooming Gantt Docs

Here’s an example of how to enable and configure the Zoom feature: DHTMLX Snippet Tool.

If it won’t help, it may be helpful if you add your configuration to the following snippet and make sure that the issue is reproduced there: https://snippet.dhtmlx.com/. Then, click on the Save button and send me the link.

Best regards,
Valeria Ivashkevich
DHTMLX Support Engineer