Duration_step and time_step

[Joseph]

Hi,

My current configuration is:

gantt.config.duration_step = 30;        
gantt.config.duration_unit = 'minute';
// Not exactly sure what this affects
// gantt.config.time_step = 60;

I kind of get what this is, each duration is 30 minute, so if my task if 2 unit, then it will be 1 hour for my task.

However, when I try to drag the task on my timeline, I am able to see that the duration unit change from 8 (3AM) to 9 and 10 and so on during the drag, but it will not be locked to 9 (3.30AM). Instead it can only be locked to 10 or 12 or so on.

And then I tried to use time_step to see if it is what makes it work. But it isn’t, and from my observation, I couldn’t see what exactly is the usage for time_step.

I thought it might be for the lightbox when editing the task.

But it isn’t. I read the documentation but couldn’t really catch it is really mean.

What I’m trying to achieve is that on drag, it should be able to allow me to drag in the duration block and lock it. Meaning that based on the configuration I stated above, I should be able to lock on Duration (unit) 9 instead of only 10, 12 and so on. Am I looking at the wrong place?

And also like to know what exactly does time_step does. An snippet/explanation would really help.

As usual, you can find a copy of my demo at GitHub.

Thanks.

[guldmi]

Hi @Jozeph!

By default tasks snap to time scale cells on drag and drop, so time_step won’t affect d’n’d dates directly.
Try disabling it with round_dnd_dates config:
gantt.config.round_dnd_dates = false.

After that, drag and drop dates won’t depend on the time scale anymore and will be calculated according to time step config.
For example, allocate tasks with 30 minutes step:
gantt.config.time_step = 30;
https://docs.dhtmlx.com/gantt/api__gantt_round_dnd_dates_config.html

Alternatively, you can leave round_dnd_dates enabled and change the step of the time scale to match the time step you want to drag and drop tasks.

https://docs.dhtmlx.com/gantt/api__gantt_step_config.html
https://docs.dhtmlx.com/gantt/api__gantt_subscales_config.html

Here is a sample, where you can see how do these properties work:

Plunker - dhtmlxGantt template

[Joseph]

Hi guldmi,

Thanks for the explanation, it is clearer to me now. I can play around with the different settings to see which suit me best.

I have some more questions though.

1. With the default snap to timescale, here’s a hour view.

And my day view.

Let’s say I somehow accidentally dragged the task, and it will auto snap to 0 duration.

Now, in order to drag back to any duration, I am not able to. I don’t have a gif, but if you try to click and drag to left or right, it doesn’t change/move. After playing with it some time, I notice that you can drag the task by doing so…

Hover the mouse on the left circle, drag to the left, then to the right. (still on mouse pressed)
If you try to drag to the left, the bar will never show.

You can use my demo @ GitHub to play with what I meant.

I would have assume that if I hover on the right circle, and dragged to the right, the bar should start appearing. And not by hover on the left circle, then dragged to the right.

2. What exactly is min_duration config used for?

Thanks!

[guldmi]

Hi @Joseph!
min_duration should prevent this very issue by not allowing shrinking tasks below a certain duration. I can confirm it doesn’t work as expected and I’ve reported it to our internal bug tracker.

As a workaround, you can control drag and drop the duration of tasks using API events:

function setMinDuration(task){
	if(!gantt.calculateDuration(task)){
		dragTask.end_date = gantt.calculateEndDate({
			start_date: task.start_date,
			duration: 1,
			task: task
		});
	}
}

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
	if(mode == "resize"){
		var dragTask = gantt.getTask(id);
		setMinDuration(dragTask);
	} 
});
gantt.attachEvent("onBeforeTaskChanged", function(id, mode, task){
	if(mode == "resize"){
		var dragTask = gantt.getTask(id);
		setMinDuration(dragTask);
	} 
	return true;
});

https://docs.dhtmlx.com/gantt/api__gantt_onbeforetaskchanged_event.html
https://docs.dhtmlx.com/gantt/api__gantt_ontaskdrag_event.html

Here is a working demo:

Plunker - dhtmlxGantt template

Tasks still can snap to zero duration during resize (I haven’t figured how to prevent it yet), but they obtain the minimal duration of 30 minutes after the user releases the mouse

[Joseph]

Hey @guldmi,

Apologies, I haven’t had time to test this out yet. Will come back to this later.

Thanks for the workaround.

[ramil]

Hello Joseph,
The dev team has fixed the bug with the min_duration property:
https://docs.dhtmlx.com/gantt/whatsnew.html#633
Now, the task doesn’t shrink to 0 duration.
Here is the snippet to check how it works:
http://snippet.dhtmlx.com/f74c1cf39

[ramil]

Hello Joseph,
The dev team fixed the bug with the resizers in the material skin:
https://docs.dhtmlx.com/gantt/whatsnew.html#71

You can check how it works in the following snippet:
https://snippet.dhtmlx.com/5/5580b3b1e