How to deny or disable to drag in the left side task?

Gantt
#1

I am using paid version of Gantt . As per the requirement, I should not allow the user to drag the start date .

is there any option to disable the drag option only for start date at the same time need to allow the user to drag end date ?

I have used “onBeforeTaskDrag” method , but if i return as false , both start and end date not able to drag. But I need to allow only end date .

Kindly help us to resolve this issue . error

Regards,
Aravind L

#2

Hi,
You can hide the draggable start_date element with CSS:

.gantt_task_drag[data-bind-property="start_date"] {
    display: none !important;
}

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

I think that we’ll add the section “Disabling resize of specific tasks” in the documentation. I’ll let you know as soon as we publish it.

#3

Thanks for your quick reply. sorry for delay response. I have one more doubt.

Currently i have disabled the drag (start date) for all the task by adding the css which you given .

if I want to enable the drag (start_date) for specific task means how to achieve ?

kindly help us .

Regards,
Aravind L

#4

Hi,
You can add a property to the task object, such as allow_resize: true. Then using gantt.templates.task_class you can add a CSS class that will hide the resize elements, except for specific tasks:

gantt.templates.task_class = (start, end, task) => {
    if (task.allow_resize) {
        return "";
    }
    return "no_resize";
}

The style could be like this:

.no_resize .gantt_task_drag[data-bind-property="start_date"] {
    display: none !important;
}

Please see an example: https://snippet.dhtmlx.com/2lb12mdq.

#5

Thanks for your kind reply. it is working, I have one more doubt .

is there any way to identify the drag position (whether the user drag the start date or end date ) ?.

#6

Hi,
If you need to find out which date is being changed by resize, you can use the gantt.getState().drag_from_start flag:

gantt.attachEvent("onBeforeTaskDrag", (id, mode, e) => {
    if (mode === "resize") {
        if (gantt.getState().drag_from_start === true) {
            gantt.message("start_date has been changed");
        } else {
            gantt.message("end_date has been changed");
        }
    }
    
    return true;
});

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

By the way, we added the sections Disabling resize of specific tasks, Which side of a task is being resized and Disabling resize of the start or the end date of a task, please take a look, maybe there will be useful information for you.