Gantt Resource Grid onGridResize


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.


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.

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.

Note you need to add this code in the onGanttReady event:

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

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

	var resourceGridOldWidth;

	gantt.event(gantt.$root, "mousedown", function (e) {
		if (".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:

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


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


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: