Split Gantt by Grid and Chart

Hi,

I was wondering if there is such capability at the moment.

I want to init one Gantt but able to render just the Grid or just the Chart portion.

I have a snippet here - http://docs.dhtmlx.com/gantt/snippet/3d835782

So assuming that I have 2 panels (2 div), left and right.
Panel 1 is like a sidebar (width of sidebar is fixed), while panel 2 is like a extended mode which can be hidden/close to show the underlaying page.

So I like to be able to do something like…

Now my page is showing only with the sidebar…


So I initialize the Gantt and display show the Grid while the right panel (2) still showing some other stuff.

But there could also be cases whereby I like to show Chart on the right (Panel 2) and change what is display in Panel 1 (Sidebar).

Is this possible?

Thanks!

Hello Joseph,
Gantt layout is an object:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html
So, you can create the layout structure from various parts.
I have the following sample where you can choose which parts of Gantt you want to see
https://snippet.dhtmlx.com/79f79c05b
In the following snippet, the layout is assembled from the objects:
http://snippet.dhtmlx.com/9ec902bf7

Hi @ramil,

Thanks for that.

It may serve my needs but I need to try it out first.
However, from the example, it seem like it is all in the same layer/div. I’m not sure if mine is slight different than your example. So let me try to explain a little bit more.

Here’s the page.

So if I click on the button, it will open the sidebar on top of the base page, and show the Grid only.

And if I click to open the chart, it will then create/load another div (the blue line as the border, think like opening a modal) to the right. and display the chart.

Which means that I kind of compartmentalize Grid and Chart such that I can call to display it in different div or component rather than just switching the config.layout.

I’m still trying to work out the concept and not sure if using config.layout would be able to perform such task.

Thanks.

Hello Joseph,
Thank you for the clarification.
The layout is not 3D. You can show HTML elements inside Gantt, but Gantt wasn’t created in a way that you can separate the grid from the timeline or divide parts of Gantt.
You need to implement a custom solution. The following samples might help you to implement the solution.
You can separate the resource view from the Gantt view, but it will work only until you reinitialize Gantt:
https://snippet.dhtmlx.com/936a20a99
Here is another sample where Gantt works in the modal box:
http://snippet.dhtmlx.com/dff75b2a8

Hi @ramil,

Thanks for the help too.

I suspected so as well, but just want to verify.

Will look into your suggestion too.

Thank you.