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.
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?
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: