[REACT] I want to limit drag and drop of sub task
Hi,
I want to limit drag and drop of subtask to the parent task only. I'm using typescript, how I can handle this.
Thanks,
Bharat
Hi,
I want to limit drag and drop of subtask to the parent task only. I'm using typescript, how I can handle this.
Thanks,
Bharat
Hi Bharat,
There is preventable https://bryntum.com/products/gantt/docs/api/Gantt/feature/TaskDrag#event-beforeTaskDrag event.
Just add check you need into handler and return true
/false
to allow/prevent action.
As example, check https://bryntum.com/products/gantt/docs/api/Core/data/mixin/TreeNode#property-isParent property of draggable record.
Hi,
Can you please provide sample code for prevent action?
Thanks,
Bharat
Hi,
Here is an example code snippet for you
listeners : {
beforeTaskDrag ({ taskRecord }) {
if (taskRecord.isParent) {
return false;
}
}
}
Hi,
I want to disable drag and drop for specific task. Also, subtask should not be dragged outside of the parent task.
Hi,
Do you mean row reordering by drag and drop?
Hi,
No, Like in above example the sub task of set up web server should not be able to be dragged inside Website design.
Thanks,
Bharat
Hi,
You could use https://bryntum.com/products/gantt/docs/api/Grid/feature/RowReorder#event-gridRowBeforeDropFinalize to achieve that
And here is the code I used to implement this
features : {
rowReorder : {
listeners : {
gridRowBeforeDropFinalize (event) {
const { context } = event;
const gantt = window.gantt;
const parent = gantt.project.taskStore.getById(context.oldPositionContext[0].parentId);
if (parent.name.toLowerCase() === 'setup web server' && context.insertBefore.parent?.name.toLowerCase() === 'website design') {
context.valid = false;
}
}
},
}
}
Hi,
I'm using typescript with react. I'm getting error 'Parameter 'event' implicitly has an 'any' type.'
Hi,
Try setting the event param to any
gridRowBeforeDropFinalize (event : any) {