Timeline column width - task bar width

Gantt
#1

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);
            }
        }
    });
#2

Here are images to highlight the issue

image
image1717×517 39.1 KB

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!

image
image1719×404 32.5 KB

#3

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.

#4

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.

#5

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.

#6

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.

#7

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?

image
image1715×543 33.6 KB

#8

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:

  1. Use the min_column_width property and set a wider visible date range.
    Here is an example:
    Screenshot by Lightshot
    DHTMLX Snippets
  2. Use the min_column_width property and set the fixed size for the Gantt container. Here is an example:
    Screenshot by Lightshot
    DHTMLX Snippets
#9

Thanks, ramil!

Neither of these options really offer a solution in this case as I’m trying to offer the ability to create and drag tasks.

Is there a way to change the range start and end if a timeline cell is greater than the min_column_width? Adding a day until that condition is met?

image
image1720×764 20.5 KB

image
image1716×760 24.8 KB

#10

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:

const timelineCells = gantt.getScale().count;
const timelineWidth = gantt.$task.offsetWidth;
const currentCellWidth = timelineWidth / timelineCells;
if (currentCellWidth > gantt.config.min_column_width) {
    const newMinCells = Math.ceil(timelineWidth / gantt.config.min_column_width);
    const addCells = (newMinCells - timelineCells) / 2;

    gantt.config.start_date = gantt.config.start_date || gantt.getState().min_date;
    gantt.config.end_date = gantt.config.end_date || gantt.getState().max_date;

    gantt.config.start_date = gantt.date.add(gantt.config.start_date, -addCells, gantt.config.duration_unit);
    gantt.config.end_date = gantt.date.add(gantt.config.end_date, addCells, gantt.config.duration_unit);

    gantt.render();
}

Here is the snippet:
https://snippet.dhtmlx.com/7yo1fhg4