TaskSegmentDrag
Allows user to drag and drop task segments, to change their start date.
//<code-header>
fiddle.title = 'Task segments';
//</code-header>
const gantt = new Gantt({
appendTo : targetElement,
height : 200,
startDate : '2022-07-25',
endDate : '2022-08-01',
rowHeight : 60,
project : new ProjectModel({
startDate : '2022-07-25',
events : [
{
id : 1,
name : 'Task A',
startDate : '2022-07-25',
duration : 3,
segments : [
{
startDate : '2022-07-25',
duration : 2
},
{
startDate : '2022-07-28',
duration : 1
}
]
},
{
id : 2,
name : 'Task B',
startDate : '2022-07-25',
duration : 3,
segments : [
{
startDate : '2022-07-25',
duration : 1
},
{
startDate : '2022-07-27',
duration : 2
},
{
startDate : '2022-07-30',
duration : 1
}
]
}
]
})
});This feature is enabled by default
Configs
21
Configs
21Misc
Other
Properties
23
Properties
23Common
Class hierarchy
Other
Functions
29
Functions
29Configuration
Events
Misc
Other
Events
17
Events
17Fires on the owning Gantt after a task drop, regardless if the drop validity
// Adding a listener using the "on" method
taskSegmentDrag.on('afterTaskSegmentDrop', ({ source, taskRecords, valid }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dropped segments |
valid | Boolean |
Fires on the owning Gantt before segment dragging starts. Return false to prevent the action.
// Adding a listener using the "on" method
taskSegmentDrag.on('beforeTaskSegmentDrag', ({ source, taskRecord, event }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | The segment about to be dragged |
event | Event | The native browser event |
Fires on the owning Gantt to allow implementer to prevent immediate finalization by setting data.context.async = true
in the listener, to show a confirmation popup etc
scheduler.on('beforetasksegmentdropfinalize', ({ context }) => {
context.async = true;
setTimeout(() => {
// async code don't forget to call finalize
context.finalize();
}, 1000);
})
// Adding a listener using the "on" method
taskSegmentDrag.on('beforeTaskSegmentDropFinalize', ({ source, context, context.taskRecords, context.valid, context.async, context.finalize }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | Gantt instance |
context | Object | |
context.taskRecords | TaskModel[] | Dragged segments |
context.valid | Boolean | Set this to |
context.async | Boolean | Set true to handle dragdrop asynchronously (e.g. to wait for user confirmation) |
context.finalize | function | Call this method to finalize dragdrop. This method accepts one argument: pass true to update records, or false, to ignore changes |
Fires on the owning Gantt while a segment is being dragged
// Adding a listener using the "on" method
taskSegmentDrag.on('taskSegmentDrag', ({ source, taskRecords, startDate, endDate, dragData, changed }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dragged segments |
startDate | Date | |
endDate | Date | |
dragData | Object | |
changed | Boolean |
|
Fires on the owning Gantt when segment dragging starts
// Adding a listener using the "on" method
taskSegmentDrag.on('taskSegmentDragStart', ({ source, taskRecords }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dragged segments |
Fires on the owning Gantt after a valid task drop
// Adding a listener using the "on" method
taskSegmentDrag.on('taskSegmentDrop', ({ source, taskRecords, isCopy }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dropped segments |
isCopy | Boolean |
Event handlers
17
Event handlers
17Called on the owning Gantt after a task drop, regardless if the drop validity
new TaskSegmentDrag({
onAfterTaskSegmentDrop({ source, taskRecords, valid }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dropped segments |
valid | Boolean |
Called on the owning Gantt before segment dragging starts. Return false to prevent the action.
new TaskSegmentDrag({
onBeforeTaskSegmentDrag({ source, taskRecord, event }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | The segment about to be dragged |
event | Event | The native browser event |
Called on the owning Gantt to allow implementer to prevent immediate finalization by setting data.context.async = true
in the listener, to show a confirmation popup etc
scheduler.on('beforetasksegmentdropfinalize', ({ context }) => {
context.async = true;
setTimeout(() => {
// async code don't forget to call finalize
context.finalize();
}, 1000);
})
new TaskSegmentDrag({
onBeforeTaskSegmentDropFinalize({ source, context }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | Gantt instance |
context | Object | |
context.taskRecords | TaskModel[] | Dragged segments |
context.valid | Boolean | Set this to |
context.async | Boolean | Set true to handle dragdrop asynchronously (e.g. to wait for user confirmation) |
context.finalize | function | Call this method to finalize dragdrop. This method accepts one argument: pass true to update records, or false, to ignore changes |
Called on the owning Gantt while a segment is being dragged
new TaskSegmentDrag({
onTaskSegmentDrag({ source, taskRecords, startDate, endDate, dragData, changed }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dragged segments |
startDate | Date | |
endDate | Date | |
dragData | Object | |
changed | Boolean |
|
Called on the owning Gantt when segment dragging starts
new TaskSegmentDrag({
onTaskSegmentDragStart({ source, taskRecords }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dragged segments |
Called on the owning Gantt after a valid task drop
new TaskSegmentDrag({
onTaskSegmentDrop({ source, taskRecords, isCopy }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecords | TaskModel[] | Dropped segments |
isCopy | Boolean |