TaskSegmentResize

Feature that allows resizing a task segment by dragging its end.

Task segments

//<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

Common

disabledInstancePlugin

listenersEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Other

allowResizeToZeroEventResize

bottomHandleEventResize

catchEventHandlerExceptionsEvents

dragThresholdEventResize

dragTouchStartDelayEventResize

dynamicHandleSizeEventResize

leftHandleEventResize

lockLayoutEventResize

reservedSpaceEventResize

resizeSelectedEventResize

rightHandleEventResize

showExactResizePositionEventResize

showTooltipEventResize

tipEventResize

tooltipTemplateEventResize

topHandleEventResize

validatorFnEventResize

validatorFnThisObjEventResize

Properties

Common

disabledInstancePlugin

Class hierarchy

isTaskSegmentResize: Boolean= truereadonly

Identifies an object as an instance of TaskSegmentResize class, or subclass thereof.

isTaskSegmentResize: Boolean= truereadonlystatic

Identifies an object as an instance of TaskSegmentResize class, or subclass thereof.

isEventResizeEventResize

isEventsEvents

isEventSegmentResizeEventSegmentResize

isInstancePluginInstancePlugin

isLocalizableLocalizable

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

isResizingEventResize

tipEventResize

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

beforeTaskSegmentResize

Fired on the owning Gantt before resizing starts. Return false to prevent the action.

// Adding a listener using the "on" method
taskSegmentResize.on('beforeTaskSegmentResize', ({ source, taskRecord, resourceRecord, event }) => {

});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event

beforeTaskSegmentResizeFinalize

Fired 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.

 gantt.on('beforeTaskSegmentResizeFinalize', ({context}) => {
     context.async = true;
     setTimeout(() => {
         // async code don't forget to call finalize
         context.finalize();
     }, 1000);
 })

// Adding a listener using the "on" method
taskSegmentResize.on('beforeTaskSegmentResizeFinalize', ({ source, context, context.async, context.finalize }) => {

});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`context`	Object
`context.async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes

taskSegmentPartialResize

Fires on the owning Gantt on each resize move event

// Adding a listener using the "on" method
taskSegmentResize.on('taskSegmentPartialResize', ({ source, taskRecord, startDate, endDate, element }) => {

});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement

taskSegmentResizeEnd

Fires on the owning Gantt after the resizing gesture has finished.

// Adding a listener using the "on" method
taskSegmentResize.on('taskSegmentResizeEnd', ({ source, changed, taskRecord }) => {

});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`taskRecord`	TaskModel	Segment being resized

taskSegmentResizeStart

Fires on the owning Gantt when event resizing starts

// Adding a listener using the "on" method
taskSegmentResize.on('taskSegmentResizeStart', ({ source, taskRecord, resourceRecord, event }) => {

});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event

beforeDestroyEvents

beforeEventResizeEventResize

beforeEventResizeFinalizeEventResize

beforeEventSegmentResizeEventSegmentResize

beforeEventSegmentResizeFinalizeEventSegmentResize

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

eventPartialResizeEventResize

eventResizeEndEventResize

eventResizeStartEventResize

eventSegmentPartialResizeEventSegmentResize

eventSegmentResizeEndEventSegmentResize

eventSegmentResizeStartEventSegmentResize

Event handlers

onBeforeTaskSegmentResize

Called on the owning Gantt before resizing starts. Return false to prevent the action.

new TaskSegmentResize({
    onBeforeTaskSegmentResize({ source, taskRecord, resourceRecord, event }) {

    }
});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event

onBeforeTaskSegmentResizeFinalize

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.

 gantt.on('beforeTaskSegmentResizeFinalize', ({context}) => {
     context.async = true;
     setTimeout(() => {
         // async code don't forget to call finalize
         context.finalize();
     }, 1000);
 })

new TaskSegmentResize({
    onBeforeTaskSegmentResizeFinalize({ source, context }) {

    }
});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`context`	Object
`context.async`	Boolean	Set true to handle resize asynchronously (e.g. to wait for user confirmation)
`context.finalize`	function	Call this method to finalize resize. This method accepts one argument: pass `true` to update records, or `false`, to ignore changes

onTaskSegmentPartialResize

Called on the owning Gantt on each resize move event

new TaskSegmentResize({
    onTaskSegmentPartialResize({ source, taskRecord, startDate, endDate, element }) {

    }
});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`startDate`	Date
`endDate`	Date
`element`	HTMLElement

onTaskSegmentResizeEnd

Called on the owning Gantt after the resizing gesture has finished.

new TaskSegmentResize({
    onTaskSegmentResizeEnd({ source, changed, taskRecord }) {

    }
});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`changed`	Boolean	Shows if the record has been changed by the resize action
`taskRecord`	TaskModel	Segment being resized

onTaskSegmentResizeStart

Called on the owning Gantt when event resizing starts

new TaskSegmentResize({
    onTaskSegmentResizeStart({ source, taskRecord, resourceRecord, event }) {

    }
});

Parameter	Type	Description
`source`	Gantt	Gantt instance
`taskRecord`	TaskModel	Segment being resized
`resourceRecord`	ResourceModel	Resource record the resize starts within
`event`	MouseEvent	Browser event