TaskDragCreate
A feature that allows the user to schedule tasks by dragging in the empty parts of the gantt timeline row. Note, this feature is only applicable for unscheduled tasks.
//<code-header>
fiddle.title = 'Task drag create';
//</code-header>
targetElement.innerHTML = '<p>This demo shows the task drag create feature, start dragging on Gantt rows to create (schedule) a task:</p>';
// Project contains all the data and is responsible for correct scheduling
const project = new ProjectModel({
startDate : new Date(2017, 0, 1),
tasks : [
{
id : 1,
name : 'Write docs',
expanded : true,
children : [
{ id : 2, name : 'Proof-read docs' },
{ id : 3, name : 'Release docs' }
]
}
]
});
const gantt = new Gantt({
appendTo : targetElement,
ref : 'gantt', // reference is used to easily obtain Gantt reference in it's parent container (see Edit button click handler)
flex : '1 0 100%',
project, // Gantt needs project to get schedule data from
startDate : new Date(2016, 11, 31),
endDate : new Date(2017, 0, 11),
height : 300,
columns : [
{ type : 'name', field : 'name', text : 'Name' }
]
});This feature is enabled by default
Configs
27
Configs
27Misc
Other
Properties
19
Properties
19Common
Class hierarchy
Functions
28
Functions
28Configuration
Events
Misc
Other
Events
15
Events
15Fires on the owning Gantt at the end of the drag create gesture whether or not a task was scheduled by the gesture.
// Adding a listener using the "on" method
taskDragCreate.on('afterDragCreate', ({ source, proxyElement }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
proxyElement | HTMLElement | The element showing the drag creation zone. |
Fires on the owning Gantt at the beginning of the drag gesture
// Adding a listener using the "on" method
taskDragCreate.on('beforeDragCreate', ({ source, taskRecord, date }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | |
date | Date | The datetime associated with the drag start point. |
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('beforedragcreatefinalize', ({context}) => {
context.async = true;
setTimeout(() => {
// async code don't forget to call finalize
context.finalize();
}, 1000);
})
// Adding a listener using the "on" method
taskDragCreate.on('beforeDragCreateFinalize', ({ source, proxyElement, context, context.async, context.finalize }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | Scheduler instance |
proxyElement | HTMLElement | Proxy element, representing future event |
context | Object | |
context.async | Boolean | Set true to handle drag create asynchronously (e.g. to wait for user confirmation) |
context.finalize | function | Call this method to finalize drag create. This method accepts one argument: pass true to update records, or false, to ignore changes |
Fires on the owning Gantt after the task has been scheduled.
// Adding a listener using the "on" method
taskDragCreate.on('dragCreateEnd', ({ source, taskRecord, event, proxyElement }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | |
event | MouseEvent | The ending mouseup event. |
proxyElement | HTMLElement | The proxy element showing the drag creation zone. |
Fires on the owning Gantt after the drag start has created a proxy element.
// Adding a listener using the "on" method
taskDragCreate.on('dragCreateStart', ({ source, proxyElement }) => {
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
proxyElement | HTMLElement | The proxy representing the new event. |
Event handlers
15
Event handlers
15Called on the owning Gantt at the end of the drag create gesture whether or not a task was scheduled by the gesture.
new TaskDragCreate({
onAfterDragCreate({ source, proxyElement }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
proxyElement | HTMLElement | The element showing the drag creation zone. |
Called on the owning Gantt at the beginning of the drag gesture
new TaskDragCreate({
onBeforeDragCreate({ source, taskRecord, date }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | |
date | Date | The datetime associated with the drag start point. |
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('beforedragcreatefinalize', ({context}) => {
context.async = true;
setTimeout(() => {
// async code don't forget to call finalize
context.finalize();
}, 1000);
})
new TaskDragCreate({
onBeforeDragCreateFinalize({ source, proxyElement, context }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | Scheduler instance |
proxyElement | HTMLElement | Proxy element, representing future event |
context | Object | |
context.async | Boolean | Set true to handle drag create asynchronously (e.g. to wait for user confirmation) |
context.finalize | function | Call this method to finalize drag create. This method accepts one argument: pass true to update records, or false, to ignore changes |
Called on the owning Gantt after the task has been scheduled.
new TaskDragCreate({
onDragCreateEnd({ source, taskRecord, event, proxyElement }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
taskRecord | TaskModel | |
event | MouseEvent | The ending mouseup event. |
proxyElement | HTMLElement | The proxy element showing the drag creation zone. |
Called on the owning Gantt after the drag start has created a proxy element.
new TaskDragCreate({
onDragCreateStart({ source, proxyElement }) {
}
});| Parameter | Type | Description |
|---|---|---|
source | Gantt | |
proxyElement | HTMLElement | The proxy representing the new event. |