Make resizing tools hidden?

Gantt
#1

I already know it’s possible to prevent a task from being resized. I’m wondering if it’s possible to remove the little side draggable things when you hover over a task. I want to do this on a task by task basis, making some resizable and some not, with the non-resizable ones not having the draggable resizers at all.

#2

Hello,
Unfortunately, there is no built-in way to set the draggable resizers to specific tasks. One of the options is to add a custom property to the non-resizable tasks and add a certain CSS class that will hide the draggable resizer when you hover on the required task.
You can use task_class template to add a CSS class to the tasks:
https://docs.dhtmlx.com/gantt/api__gantt_task_class_template.html ;
So to the specific tasks it might look like:

gantt.templates.task_class = function(start, end, task){
    if(task.nonresizable){
        return "non-resizeable";
    }
    return "";
}

To hide the draggable resizer, you need to apply display: none to these CSS classes:

<style>
    .gantt_task_line.non-resizeable .gantt_task_drag , 
    .gantt_task_line.non-resizeable:hover .gantt_task_drag {
       display: none; 
    }
</style>

Please check the following example:
https://snippet.dhtmlx.com/kst5rxyf

1 Like
#3

Worked like a charm, thank you!