Scrollbar for Grid

Gantt
#1

Hello I have the following Layout =>

layout
layout1447×711 40.9 KB

Here I want to add a Scrollbar to the upper left Grid without changing the functionality of the resizer.
Here is the config I use at the moment:

this.gantt.config.layout = {
			css: "gantt_container",
			rows: [
				{
					gravity: 2,
					cols: [
						{ view: "grid", group: "grids", scrollY: "scrollVer", scrollX: "gridScroll", scrollable: true },
						{ resizer: true, width: 1 },
						{ view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
						{ view: "scrollbar", id: "scrollVer", group: "vertical" },
						{
							view: "scrollbar",
							id: "gridScroll"
						}
					]
				},
				{
					resizer: true,
					width: 1,
					next: "resources"
				},
				{
					gravity: 1,
					id: "resources",
					config: resourceConfig,
					templates: resourceTemplates,
					cols: [
						{ view: "resourceGrid", group: "grids", scrollY: "resourceVScroll", scrollX: "gridScroll", scrollable: true },
						{ resizer: true, width: 1 },
						{ view: "resourceHistogram", capacity: this.CAPACITY_DEFAULT, scrollX: "scrollHor", scrollY: "resourceVScroll" },
						{ view: "scrollbar", id: "resourceVScroll", group: "vertical"  }
					]
				},
				{
					view: "scrollbar",
					id: "scrollHor"
				}
			]
		};

The two top elements and the button two elements are in sync with a vertical Scrollbar.
Also there is one scrollbar on the Bottom to scroll the two elements on the right side.
I only need a scrollbar on the Upper grid. When thereby the button Scrollbar gets shorter it is ok for me

I have already tried to switch rows and columns but with no luck

thanks for helping

Michael

#2

Hello Michael,
I think it would be easier to add the horizontal scrollbar to the bottom, near the horizontal scrollbar for the timelines. In that case, you will have a simpler layout configuration.
However, you still need make a complex layout that has more cols and rows inside one another:

https://docs.dhtmlx.com/gantt/desktop__layout_config.html#layoutcustomization

We have that example of the implementation in the following snippet:
https://snippet.dhtmlx.com/uqejdyqc?text=gantt.%2Blayout&mode=wide

#3

Hi Ramil,
thanks for the links. I already tried the Examples from the page you send me but with no luck. I tried x versions of the Code you can see below but I was not able to get the same I have with the one scrollbar.
Can you give me an example of what I need?
Thanks for helping and Best regards
Michael Kröschel


this.gantt.config.layout = {
      css: "gantt_container",
      cols: [
            {
                  width: 400,
                  min_width: 200,
                  rows: [
                        {
                              group: "gantt",
                              cols: [
                                   {
                                         rows: [
                                               { view: 'grid', scrollX: 'gridScrollX', scrollable: true, scrollY: 'gridScrollY' },
                                               { view: 'scrollbar', id: 'gridScrollX' }
                                         ]
                                   },
                                   { view: 'scrollbar', id: 'gridScrollY' }
                              ]
                        },
                        { resizer: true, width: 1 },
                        {
                              group: "resources",
                              cols: [
                                   {
                                         rows: [
                                               { view: "resourceGrid", scrollY: "gridScrollY2", scrollX: "gridScrollX2", scrollable: true }
                                               , { view: "scrollbar", id: "gridScrollX2" }
                                         ]
                                   },
                                   { view: 'scrollbar', id: 'gridScrollY2' }
                              ]
                        }

                  ]
            },
            { resizer: true, width: 1 },
            {
                  rows: [
                        {
                              group: "gantt",
                              cols: [
                                   {
                                         rows: [
                                               { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                                               { view: "scrollbar", id: "scrollHor" }
                                         ]
                                   },
                                   { view: 'scrollbar', id: 'scrollVer' }
                              ]
                        },
                        { resizer: true, width: 1 },
                        {
                              gravity: 1,
                              id: "resources",
                              config: resourceConfig,
                              templates: resourceTemplates,
                              cols: [
                                   {
                                         rows: [
                                               { view: "resourceHistogram", capacity: this.CAPACITY_DEFAULT, scrollX: "scrollHor", scrollY: "resourceVScroll" },
                                               { view: "scrollbar", id: "resourceVScroll", group: "vertical"  }
                                         ]
                                   },
                                   { view: 'scrollbar', id: 'scrollVer2' }
                              ]
                        }
                  ]
            }
      ]
};
#4

Hello Michael,
If you want to synchronize the views, you need to use the group parameter:
https://docs.dhtmlx.com/gantt/desktop__layout_config.html#visibilitygroups
And the group should be on the same level to work correctly.

I modified the layout configuration from my previous snippet, and here is the updated snippet where I used something similar to your configuration:
https://snippet.dhtmlx.com/r0uw3yg9

If you need something different, please send me a picture that shows how you imagine it should look and work.

#5

Hi Ramil,
thank you for example. That almost got me to the finish line.
one last question, is it possible to have the Scrollbar for the right column not between timeline and resourceHistogram but under resourceHistogram as we had it in me screen at the beginning?
image
Regards

#6

Hello Michael,
Yes, it is possible to do that. You just need to move it from the rows cell below the timeline to the rows cell below the resourceTimeline:

1325×965 171 KB

Here is the updated snippet:
https://snippet.dhtmlx.com/b1u2q7t4