Timeline column width - task bar width

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);
            }
        }
    });
1 Like

Here are images to highlight the issue

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!

1 Like

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:

gantt.attachEvent("onTaskDrag", (id, mode, task, original) => {
    if (mode == "move") {
        rangeExtend(task);
        task.start_date = gantt.calculateEndDate(task.end_date, -task.duration);
        task.end_date = gantt.calculateEndDate(task.start_date, task.duration);
    }

    if (mode == "resize") {
        rangeExtend(task);
    }
});

Range change function:

function rangeExtend(task) {
    const range = gantt.getState();

    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
    ) {
        gantt.render();
    }
}

Please see an example: https://snippet.dhtmlx.com/muq0iqh5.

Thanks for that! I still needed to add the delay in the rangeExtend function as when I would drag multiple tasks they would randomly change position.

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.