[REACT] Gantt: Task Drag: Block task dragging based on the date condition

[alex.l]

we have a task from November, 1 to November, 20. And we want to prevent shrinking or moving this task before November, 10. I think we could set the end date constraint just for the end date in this case.

this requirement is not really clear, but I believe you meant the constraint should be for endDate to be >= Nov 10, together with startDate which is earlier than Nov 10.
I believe all you need is to adjust the requirement to format startDate/endDate bounds. calculate bounds for startDate according to task duration and set constraint in regular format.

Pseudo code

getDateConstraints(taskRecord) {
	const 
		diff = taskRecord.endDate - "Nov 10 date",
		contraintStart = taskRecord.startDate - diff;

return { start : contraintStart, end: null };
}

[dmitrypromx]

Hi Alex,

Let's consider a use case: threre are a task A from November, 1 to November, 20 and a task B from November, 1 to November 10. And task B is a child task for task A. Let's imagine that we can't change the dates for the Task B. It means that we can't set the end date before November, 10 for the Task A. But in you example of the "getDateConstraints" function there is no limitation for the end date ("end: null"). It means I can set for instance November, 8 as the end date of the Task A. How will it work?

[alex.l]

Hi,

It means I can set for instance November, 8 as the end date of the Task A. How will it work?

You can add end constraint if your logic required that.

start and end in the returned object - are bounds of allowed drop area. I limited left border and didn't limit right border.

[start constraint] -----allowed area------[your event bar]-----allowed area-----[end constraint]

You can use any values you need, just calculate dates. taskRecord you have in params does have access to parent and child tasks.
https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#property-parent
https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-children

[dmitrypromx]

Hi Alex,

You can add end constraint if your logic required that.

My question is what exactly I should specify in the "end" constraint if I want to limit shrinking the task and not allow users to set the end date before November, 10? From my understanding, there should be two dates for the "end" constraint (start: November, 10; end: null) but I can specify only one date for the "end" constraint and it is not enough.

[alex.l]

Sorry, I don't follow.

You only need to set start and end dates to constraint available area to drag/drop. Did you test it in real app? Please attach your application and we will easily apply required changes.

If you need to constraint only from left side, only one date in config is required - start, as shown in my demo code. If you need more complex calculation depending of parent tasks, just implement it according to your logic.
Or provide runnable demo with your request described and the code you used in your attempts.

But in you example of the "getDateConstraints" function there is no limitation for the end date ("end: null")

If you moved left, you need to set "start" bounds of your available for drag area. I demonstrated it in my schema and it will be more clear if you just test it in real app with static dates and see how it works.

[dmitrypromx]

Hi Alex,

Did you test it in real app?

I demonstrated it in my schema and it will be more clear if you just test it in real app with static dates and see how it works.

Yes, I tested your implementation of the "getDateConstraints" function and it doesn't solve the issue.

Sorry, I don't follow.

No worries at all. I can explain it again.
There is only one Gantt Task and nothing else. The start date of the task is November, 1 2024, the end date of the task is November, 20 2024. The goal: Prevent shrinking or moving the end date of the task before November, 10. That's it. No complex calculation, no parent tasks, no child tasks.

You can use "Basis setup Demo" from the Bryntum website: https://bryntum.com/products/gantt/examples/frameworks/react/javascript/basic/build/

Set the start date Feb, 1 2019 and end date Feb, 20 2019 for the task "Install Apache".
I can shrink the task via Drag and Drop the right edge of the task and make to be Feb, 1 to Feb, 8 for instance. But I want Feb, 10 to be the minimum date for the End Date of this task. The start date can be any date but the end date should be always greater than Feb, 10.

[alex.l]

Hi,

Thanks for clarifications!
TaskDrag and TaskResize are different features, so it needs to be handled in both.

The goal: Prevent shrinking or moving the end date of the task before November, 10.

Shrinking:

    features : {
        taskResize: {
            validatorFn({ startDate, endDate, taskRecord }) {
                return endDate > new Date(2019,10,9);
            }
        }
    }

https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskResize#config-validatorFn

Moving:

    getDateConstraints(taskRecord) {
        const 
		diff = taskRecord.endDate - new Date(2019,10,9),	
		constraintStart = taskRecord.startDate - diff;
        return { start: constraintStart };
    },

[dmitrypromx]

Hi Alex,

Thank you for this solution.
But the

Gantt.feature.TaskResize#config-validatorFn

has the issue which I described in my very first message of this topic. The app allows users to move the end date before the specified date (2019,10,9) and then rollback the changes (the dropping back animation).
That is why I wanted to know if it is somehow possible to achieve the same results only with the "getDateConstraints" event's function as it blocks tasks dragging animation.

[alex.l]

Ok, I see. Thanks for your patience. In this case, it's not supported now for task start/end dates separately. I've opened a FR https://github.com/bryntum/support/issues/9821
You can subscribe on ticket updates to be notified when it's done.