Hi guys - I couldn’t find anyone else with this problem, but I’m hoping there’s a solution.
Basically I’ve added an “onTaskDrag” event as I’ve seen directed to allow the timeline width to be increased as a task gets to the edge of the timeline. However, as the scale of the timeline changes so that it increases or decreases the scale of the task bar or bars is not changing inline with the changing timeline scale. Is there a way to ensure that the task bar width aligns with the changing timeline cell width?
const ganttonTaskDrag = gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
if (mode == "move" || mode == "resize") {
if (delay) return;
var range = gantt.getState();
// if task is closer that one day to the scale end
if (Math.abs(task.end_date - range.max_date) < 1000 * 60 * 60 * 24 ||
Math.abs(task.start_date - range.min_date) < 1000 * 60 * 60 * 24
) {
// render to extend the time scale
gantt.render();
// set a delay before the time scale can extend next time
delay = true;
setTimeout(function () {
delay = false;
}, 100);
}
}
});
When I have then dragged a task (for instance the Aug Sprint Planning) the timeline scale has gotten smaller, but the task bar has stayed the same width. Meaning the task has gone from a duration of 5 to 7 days over the course of the dragging. Please help!
Is it possible to check the timeline cell width and see if it’s currently at the set ‘min_column_width’ and if not then increase the gantt.config.start_date/gantt.config.end_date by a day until it is?
I’m not really sure how else to achieve a resolution to this issue.
Hi,
If I understand you correctly, you want to extend the range of the timeline when dragging the taskbar to one of the edge, and also so that the width of the taskbar changes according to the change in the width of the cell.
If so, then try to recalculate the start/end dates of the task while dragging the taskbar using calculateEndDate:
Hi,
It seems that onTaskDrag fires a different number of times for each of the simultaneously moved tasks, and this is most likely a bug. And I don’t have a workaround at the moment. I have included it in our development tracker, I can’t give you any ETA for it, but I will notify you of any updates.
So that task duration issue was resolved with the onTaskDrag duration recalculation, but the distance between the tasks is maintained as the scale unit width decreases when dragging more days into view… I think what I really need is a way to lock the size of the scale so it’s always the same width. Is this possible?
Hello Skoofy,
Unfortunately, there is no built-in config to specify the scale cell sizes. The dev team will add that feature in the future, but I cannot give you any ETA.
Gantt resizes the timeline scales and cells depending on the container size and the displayed date range.
So now, there are only 2 ways of how to set the fixed size:
Hello Skoofy,
Yes, it is possible to manually adjust the date range.
You can obtain the width of the timeline and the number of the task cells there. Then you can calculate the number of cells you need to add to the displayed date range.
Here is an example of how it can be implemented: