Toggling Gantt Chart and Grid's Width all together

Gantt
#1

Hello dHTMLX Team,

I’ve been using your product for awhile, and saw a potential out of it, but I’m facing some restrictions with Gantt’s Layout API, and I’m hoping you could help me.

I have a button, say, that will toggle the gantt chart’s visibility “on” or “off”. That said, the Grid should have 100% width (or even a fixed width) and the gantt chart wouldn’t show at all (or set width 1), and when I click it again, it should show the default layout again.

Here are my approaches.

A variable is set to true or false and the gantt chart will show according to its state. I have a default layout following this,

[code] gantt.config.layout = {

      css: 'gantt_container',

      cols: [

        {

          width: 700,

          min_width: 300,

          rows: [

            { view: 'grid', scrollX: 'gridScrollX', scrollY: 'scrollVer', scrollable: true },

            { view: 'scrollbar', id: 'gridScrollX', group: 'horizontal' },

          ]

        },

        {

          rows: [

            { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },

            { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },

          ]

        },

        { view: 'scrollbar', id: 'scrollVer' }

      ]

    }

[/code]
And when I click on toggle button, it sets to the following,

[code] gantt.config.layout = {

      css: 'gantt_container',

      cols: [

        {

          width: 1200,

          min_width: 300,

          rows: [

            { view: 'grid', scrollX: 'gridScrollX', scrollY: 'scrollVer', scrollable: true },

            { view: 'scrollbar', id: 'gridScrollX', group: 'horizontal' },

          ]

        },

        {
		  width: 1,
          rows: [

            { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },

            { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },

          ]

        },

        { view: 'scrollbar', id: 'scrollVer' }

      ]

    }[/code]

I’ve tried to rerender it gantt.render() after setting the new layout object but unfortunately this approach doesn’t work.

Another misc tweak I’ve tried is to set width through gantt.config.layout.cols[1].width = 1 and gantt.config.layout.cols[0].width = 1200 respectively and it also doesn’t work.

Last thing I’ve done is set show_charts to true or false and set grid_width. grid_width isn’t re-rendered and chart is hidden, but grid doesn’t set to full width, which is my requirement.

Is there any workaround for this?

#2

Hello,
To hide the timeline you don’t need to set it’s width to 1, just remove it from the config and gantt won’t display it.
There is a way to resize the grid to fit the screen, although it may not be evident.
You need to remove “scrollable:true” parameter from the grid, because otherwise gantt thinks that it should scroll the grid and it is not necessary to resize it when there is no timeline area. If you leave the parameter for both gridOnly and timeline and grid views, the grid will have the same size not matter if the timeline is hidden or not.
It is not possible to enable resizing along with horizontal scroll bars in the current gantt api version. But we added it to our tracker as a bug and hope to fix it in future versions.

Here is the snippet demonstrating how it might work:
https://snippet.dhtmlx.com/aukjyqc8?text=gantt.%2Btoggle%2Btimeline
And this one is with the removed “scrollable:true” parameter:
snippet.dhtmlx.com/1c7531244

#3

Will this issue be solved in next version? If yes when’s the estimated time for the new version of dhtmlx to come out?

#4

Hello,
Please tell us if you still can reproduce the issue in the current version.

#5

Hello,
The dev team fixed the bug with the show_grid and show_chart parameters:
https://docs.dhtmlx.com/gantt/whatsnew.html#715
Now, you need to add the hide_empty property to the layout cell. If all its children are hidden, the layout cell will also be hidden.
Right now, it is not described in the documentation, but we’ll add that information in the future.
You can check how it works in the following snippet:
https://snippet.dhtmlx.com/5/157c0db66