Save scrollbar state between renders

Gantt
#1

Hi everyone!

I need to save the scrollbar position between renders. The “getScrollbarState” method gives the scrollbar state in the graph section. And I need the scrollbar state for the table section.

#2

Hello Ruslan,
You can use the scrollLeft and scrollTop properties of the grid view to get the scroll state:

gantt.config.layout = {
	css: 'gantt_container',
	cols: [
		{
			width: 400,
			rows: [
				{
					group: 'gantt',
					cols: [
						{
							rows: [
								{ view: 'grid', bind: 'task', scrollX: 'gridScrollX', scrollable: true, scrollY: 'gridScrollY' },
							]
						},
						{ view: 'scrollbar', id: 'gridScrollY' }
					]
				},
				{ view: 'scrollbar', id: 'gridScrollX' }
			]
		},
		...
	]
};

...

const currentGridX = gantt.getLayoutView("gridScrollX").$view.scrollLeft;
const currentGridY = gantt.getLayoutView("gridScrollY").$view.scrollTop;

You can see a working example here: DHTMLX Snippet Tool

#3

Unfortunately, our project has version 7.0.8 pro, which does not have the getLayoutView method. Is there any other solution?

#4

Hello Ruslan,
In that case, you can get the scroll position by accessing the relevant DOM elements for the vertical and horizontal scrollbars:

const verticalScrollElement = document.querySelector('.gantt_ver_scroll');
const horizontalScrollElement = document.querySelector('.gantt_hor_scroll');

const currentGridX = horizontalScrollElement ? horizontalScrollElement.scrollLeft : 0;
const currentGridY = verticalScrollElement ? verticalScrollElement.scrollTop : 0;

Please see an example: DHTMLX Snippet Tool