Gantt Resource Grid onGridResize

Gantt
#1

I have a resource panel on my gantt chart and the task and resource grids have synchronized resizing using groups. I have onGridResizeEnd attached to the task grid. Is there any way I can attach an onGridResizeEnd event to the resource grid.

#2

Hi @folyjon!

Currently, only the primary grid throws resize events.
But you can work around it using a public api easily enough - you can manually trace resizing of the resource grid and call onGridResize events yourself.

Please add gantt.event(gantt.$root, "mousedown", function(e) { }); event listener to check the width of the resources grid before resizing.
https://docs.dhtmlx.com/gantt/api__gantt_event.html

Then add gantt.event(window, "mouseup", function(e) { }); event listener to check the width of the resources grid after resizing. And call the onGridResizeEnd event using gantt.callEvent method with the width values as arguments.
https://docs.dhtmlx.com/gantt/api__gantt_callevent.html

Note you need to add this code in the onGanttReady event:
https://docs.dhtmlx.com/gantt/api__gantt_onganttready_event.html

gantt.attachEvent("onGanttReady", function () {

	if(gantt.$resourceGridResizeAttached) return;
	gantt.$resourceGridResizeAttached = true;

	var resourceGridOldWidth;

	gantt.event(gantt.$root, "mousedown", function (e) {
		if (e.target.matches(".gantt_layout_content.gantt_resizer_x")) resourceGridOldWidth = gantt.$ui.getView("resourceGrid").$state.width;
	});

	gantt.event(window, "mouseup", function (e) {
		if (resourceGridOldWidth) setTimeout(function () {
				{
					var resourceGridNewWidth = gantt.$ui.getView("resourceGrid").$state.width;
					gantt.callEvent("onGridResizeEnd", [resourceGridOldWidth, resourceGridNewWidth]);
					resourceGridOldWidth = null;
				}
			},
		);
	});
})

Here is a snippet you can see how it can be implemented. Try to resize resources grid and look at the massages in the right-top:
http://snippet.dhtmlx.com/1fe446d4f

Does it help you in any way, or do you need something different?

#3

Thanks, I ended up doing it like below

var $resourceGridResizer = gantt.$ui.getView('resourceGridResizer');
            
if($resourceGridResizer) {
	$resourceGridResizer.attachEvent('onResizeEnd', function(oldGridSize, oldTimelineSize, newGridSize, newTimelineSize){
		//resizeResourceCaptionColumn(gantt, control, oldGridSize, newGridSize);		
		var res = gantt.callEvent('onGridResizeEnd', [oldGridSize, newGridSize]);

		return res;
	});
}

However I also need to resize one of the columns on the resourceGrid based on the new resourceGrid width. How do I go about this? I have tried getting the column from the gantt.config.layout and changing its width but this does not seem to work

#4

Hi @folyjon!

If you make changes in the layout, you need to reinitialize Gantt.
I.e. just call gantt.init("gantt_here") after you change the layout config

Please check this post with the same issue of layout properties changing: