TaskEdit

Feature that allows editing tasks using a TaskEditor, a popup with fields for editing task data.

This demo shows the task edit feature, double-click child task bar to start editing:

Task edit

//<code-header>
fiddle.title = 'Task edit';
//</code-header>
// 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', startDate : '2017-01-02', endDate : '2017-01-05' },
                { id : 3, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
            ]
        }
    ],

    dependencies : [
        { fromTask : 2, toTask : 3 }
    ]
});

const gantt = new Gantt({
    appendTo : targetElement,
    flex     : '1 0 100%',
    height   : 200,

    project, // Gantt needs project to get schedule data from
    startDate : new Date(2016, 11, 31),
    endDate   : new Date(2017, 0, 11),

    columns : [
        { type : 'name', field : 'name', text : 'Name' }
    ]
});

Customizing tabs and their widgets

To customize tabs you can:

Reconfigure built-in tabs by providing override configs in the items config.
Remove existing tabs or add your own in the items config.
Advanced: Reconfigure the whole editor widget using editorConfig or replace the whole editor using editorClass.

This example shows a custom Task Editor configuration. The built-in "Notes" tab is hidden, a custom "Files" tab is added, the "General" tab is renamed to "Common" and "Custom" field is appended to it. Double-click on a task bar to start editing:

Custom task edit

//<code-header>
fiddle.title = 'Custom task edit';
//</code-header>
const project = new ProjectModel({
    startDate : new Date(2017, 0, 1),

    tasks : [
        {
            id       : 1,
            name     : 'Write docs',
            expanded : true,
            custom   : 'Parent custom field value',
            children : [
                // 'custom' field is auto exposed to Task model, then its name is used in TaskEditor to get/set values
                {
                    id        : 2,
                    name      : 'Proof-read docs',
                    startDate : '2017-01-02',
                    endDate   : '2017-01-05',
                    custom    : 'Proof-read custom value'
                },
                {
                    id        : 3,
                    name      : 'Release docs',
                    startDate : '2017-01-09',
                    endDate   : '2017-01-10',
                    custom    : 'Release custom value'
                }
            ]
        }
    ],

    dependencies : [
        { id : 1, fromTask : 2, toTask : 3 }
    ]
});

// May be registered in case this example is run again
if (!Widget.factoryable.registry.custom_filestab) {
    // Custom FilesTab class (the last item of tabsConfig)
    class FilesTab extends Grid {

        // Factoryable type name
        static get type() {
            return 'custom_filestab';
        }

        static configurable = {
            title    : 'Files',
            defaults : {
                labelWidth : 200
            },
            columns : [{
                text     : 'Files attached to task',
                field    : 'name',
                type     : 'template',
                template : data => `<i class="fa fa-fw fa-${data.record.data.icon}"></i>${data.record.data.name}`
            }]
        };

        loadEvent(eventRecord) {
            let files = [];

            // prepare dummy files data
            switch (eventRecord.data.id) {
                case 1:
                    files = [
                        { id : 1, name : 'Image1.png', icon : 'image' },
                        { id : 2, name : 'Chart2.pdf', icon : 'chart-pie' },
                        { id : 3, name : 'Spreadsheet3.pdf', icon : 'file-excel' },
                        { id : 4, name : 'Document4.pdf', icon : 'file-word' },
                        { id : 5, name : 'Report5.pdf', icon : 'user-chart' }
                    ];
                    break;
                case 2:
                    files = [
                        { id : 1, name : 'Chart11.pdf', icon : 'chart-pie' },
                        { id : 2, name : 'Spreadsheet13.pdf', icon : 'file-excel' },
                        { id : 3, name : 'Document14.pdf', icon : 'file-word' }
                    ];
                    break;
                case 3:
                    files = [
                        { id : 1, name : 'Image21.png', icon : 'image' },
                        { id : 2, name : 'Spreadsheet23.pdf', icon : 'file-excel' },
                        { id : 3, name : 'Document24.pdf', icon : 'file-word' },
                        { id : 4, name : 'Report25.pdf', icon : 'user-chart' }
                    ];
                    break;
            } // eo switch

            this.store.data = files;
        } // eo function loadEvent
    } // eo class FilesTab

    // register 'filestab' type with its Factory
    FilesTab.initClass();
}

const gantt = new Gantt({
    appendTo : targetElement,
    flex     : '1 0 100%',
    height   : 200,

    project, // Gantt needs project to get schedule data from
    startDate : new Date(2016, 11, 31),
    endDate   : new Date(2017, 0, 11),

    columns : [
        { type : 'name', field : 'name', text : 'Name' }
    ],

    features : {
        taskEdit : {
            items : {
                generalTab : {
                    // Change title of General tab
                    title : 'Common',
                    items : {
                        // Add new field
                        newCustomField : {
                            type   : 'textfield',
                            weight : 710,
                            label  : 'Custom (New Field)',
                            name   : 'custom' // Name of the field matches data field name, so value is loaded/saved automatically
                        }
                    }
                },
                // Remove Notes tab
                notesTab : false,
                // Add custom Files tab to the second position
                filesTab : {
                    type   : 'custom_filestab',
                    weight : 110
                }
            },
            editorConfig : {
                // Custom height of the Task Editor
                height : '35em'
            }
        } // eo taskEdit
    } // eo features
});

To add extra items to a tab you need to specify items for the tab container. This example shows custom widgets added to "General" tab:

Task edit extra items

//<code-header>
fiddle.title = 'Task edit extra items';
//</code-header>
// 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', startDate : '2017-01-02', endDate : '2017-01-05', effort : 0 },
                { id : 3, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10', effort : 0 }
            ]
        }
    ],

    dependencies : [
        { fromTask : 2, toTask : 3 }
    ]
});

const gantt = new Gantt({
    appendTo : targetElement,
    flex     : '1 0 100%',
    height   : 190,

    project, // Gantt needs project to get schedule data from
    startDate : new Date(2016, 11, 31),
    endDate   : new Date(2017, 0, 11),

    columns : [
        { type : 'name', field : 'name', text : 'Name' }
    ],

    features : {
        taskEdit : {
            items : {
                // Add two widgets to the bottom of general tab
                generalTab : {
                    items : {
                        newTextField : {
                            type     : 'text',
                            weight   : 710,
                            readOnly : true,
                            editable : false,
                            label    : 'Milestone (New Field)',
                            name     : 'milestone',
                            flex     : '1 0 50%'
                        },
                        newButton : {
                            type   : 'button',
                            weight : 711,
                            text   : 'New Button',
                            flex   : '1 0 50%'
                        }
                    }
                }
            }
        }
    }
});

Note that object notation is used to specify all built-in items in the tabs in the editor, thus object notation has to be used to manipulate them - array notation is not supported.

Expand to see Default tabs and fields

The Task editor contains tabs by default. Each tab is a container with built-in widgets: text fields, grids, etc.

Tab ref	Type	Text	Weight	Description
`generalTab`	GeneralTab	General	100	Name, start/end dates, duration, percent done, effort.
`predecessorsTab`	PredecessorsTab	Predecessors	200	Grid with incoming dependencies
`successorsTab`	SuccessorsTab	Successors	300	Grid with outgoing dependencies
`resourcesTab`	ResourcesTab	Resources	400	Grid with assigned resources
`advancedTab`	AdvancedTab	Advanced	500	Assigned calendar, scheduling mode, constraints, etc.
`notesTab`	NotesTab	Notes	600	Text area to add notes to the selected task

General tab

General tab contains widgets for basic configurations

Widget ref	Type	Text	Weight	Description
`name`	TextField	Name	100	Task name
`percentDone`	NumberField	% Complete	200	Shows what part of task is done already in percentage
`effort`	EffortField	Effort	300	Amount of working time required to complete the whole task
`divider`	Widget		400	Visual splitter between 2 groups of fields
`startDate`	StartDateField	Start	500	Shows when the task begins
`endDate`	EndDateField	Finish	600	Shows when the task ends
`duration`	DurationField	Duration	700	Shows how long the task is
`colorField` ¹	EventColorField	Color ¹	800	Choose background color for the task bar

¹ Set the showTaskColorPickers config to true to enable this field

Predecessors tab

Predecessors tab contains a grid with incoming dependencies and controls to remove/add dependencies

Widget ref	Type	Weight	Description
`grid`	Grid	100	Predecessors task name, dependency type and lag
`toolbar`	Toolbar	200	Control buttons
>`add`	Button	210	Adds a new predecessor, select task using the name column editor
>`remove`	Button	220	Removes selected incoming dependency

>: first level of submenu

Successors tab

Successors tab contains a grid with outgoing dependencies and controls to remove/add dependencies

Widget ref	Type	Weight	Description
`grid`	Grid	100	Successors task name, dependency type and lag
`toolbar`	Toolbar	200	Control buttons
>`add`	Button	210	Adds a new successor, select task using the name column editor
>`remove`	Button	220	Removes selected outgoing dependency

>: first level of submenu

Resources tab

Resources tab contains a grid with assignments

Widget ref	Type	Weight	Description
`grid`	Grid	100	Assignments resource name and units (100 means that the assigned resource spends 100% of its working time to the task)
`toolbar`	Toolbar	200	Shows control buttons
>`add`	Button	210	Adds a dummy assignment, select resource using the name column editor
>`remove`	Button	220	Removes selected assignment

>: first level of submenu

Advanced tab

Advanced tab contains additional task scheduling options

Widget ref	Type	Weight	Description
`calendarField`	Combo	100	Shows a list of available calendars for this task
`manuallyScheduledField`	Checkbox	200	If checked, the task is not considered in scheduling
`schedulingModeField`	SchedulingModePicker	300	Shows a list of available scheduling modes for this task
`effortDrivenField`	Checkbox	400	If checked, the effort of the task is kept intact, and the duration is updated. Works when scheduling mode is "Fixed Units".
`divider`	Widget	500	Visual splitter between 2 groups of fields
`constraintTypeField`	ConstraintTypePicker	600	Shows a list of available constraints for this task
`constraintDateField`	DateField	700	Shows a date for the selected constraint type
`rollupField`	Checkbox	800	If checked, shows a bar below the parent task. Works when the "Rollup" feature is enabled.
`inactiveField`	Checkbox	900	Allows to inactivate the task so it won't take part in the scheduling process.
`ignoreResourceCalendarField`	Checkbox	1000	If checked the task ignores the assigned resource calendars when scheduling

Notes tab

Notes tab contains a text area to show notes

Field ref	Type	Weight	Description
`noteField`	TextAreaField	100	Shows a text area to add text notes to the task

Removing a built-in item

To remove a built-in tab or widget, specify its ref as false in the items config:

const gantt = new Gantt({
    features : {
        taskEdit : {
            items : {
                generalTab      : {
                    items : {
                        // Remove "% Complete","Effort", and the divider in the "General" tab
                        percentDone : false,
                        effort      : false,
                        divider     : false
                    }
                },
                // Remove all tabs except the "General" tab
                notesTab        : false,
                predecessorsTab : false,
                successorsTab   : false,
                resourcesTab    : false,
                advancedTab     : false
            }
        }
    }
})

The built-in buttons are:

Widget ref	Type	Weight	Description
`saveButton`	Button	100	Save event button on the bbar
`deleteButton`	Button	200	Delete event button on the bbar
`cancelButton`	Button	300	Cancel event editing button on the bbar

Bottom buttons may be hidden using bbar config passed to editorConfig:

const gantt = new Gantt({
    features : {
        taskEdit : {
            editorConfig : {
                bbar : {
                    items : {
                        deleteButton : false
                    }
                }
            }
        }
    }
})

Customizing a built-in item

To customize a built-in tab or field, use its ref as the key in the items config and specify the configs you want to change (they will be merged with the tabs or fields default configs correspondingly):

const gantt = new Gantt({
    features : {
        taskEdit : {
            items : {
                generalTab      : {
                    // Rename "General" tab
                    title : 'Main',
                    items : {
                        // Rename "% Complete" field
                        percentDone : {
                            label : 'Status'
                        }
                    }
                }
            }
        }
    }
})

Adding a custom item

To add a custom tab or field, add an entry to the items config. When you add a field, the name property links the input field to a field in the loaded task record:

const gantt = new Gantt({
    features : {
        taskEdit : {
            items : {
                generalTab : {
                    items : {
                        // Add new field to the last position
                        newGeneralField : {
                            type   : 'textfield',
                            weight : 710,
                            label  : 'New field in General Tab',
                            // Name of the field matches data field name, so value is loaded/saved automatically
                            name   : 'custom'
                        }
                    }
                },
                // Add a custom tab to the first position
                newTab     : {
                    // Tab is a FormTab by default
                    title  : 'New tab',
                    weight : 90,
                    items  : {
                        newTabField : {
                            type   : 'textfield',
                            weight : 710,
                            label  : 'New field in New Tab',
                            // Name of the field matches data field name, so value is loaded/saved automatically.
                            // In this case it is equal to the Task "name" field.
                            name   : 'name'
                        }
                    }
                }
            }
        }
    }
})

Manipulating TaskEditor items at run time

To change input items depending upon the task being edited, use a beforeTaskEditShow listener to access the editor instance.

The available widgets are described here.

The editor exposes all its descendant widgets in its widgetMap.

const gantt = new Gantt({
    features : {
        taskEdit : true
    },
    listeners : {
        // When editing a parent task, the user may not edit the duration.
        // When editing a leaf level task she may edit the duration.
        beforeTaskEditShow({ taskRecord, editor }) {
            if (taskRecord.isParent) {
                editor.widgetMap.duration.disabled = true;
            }
            else {
                editor.widgetMap.duration.disabled = false;
            }
        }
    }
});

To turn off the Task Editor just simple disable the feature.

const gantt = new Gantt({
    features : {
        taskEdit : false
    }
})

For more info on customizing the Task Editor, please see Guides/Customization/Customize task editor

This feature is enabled by default.

Configs

Common

disabledInstancePlugin

listenersEvents

Editor

editorClass: Widget

Class to use as the editor. By default it uses TaskEditor

triggerEvent: String | null= taskdblclick

The event that shall trigger showing the editor. Set to `` or null to disable editing of existing events.

saveAndCloseOnEnterTaskEditBase

Editor widgets

confirmDeleteTaskEdit

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Other

blurActionTaskEditBase

catchEventHandlerExceptionsEvents

editorConfigTaskEdit

itemsTaskEdit

minEditSizeTaskEdit

scrollIntoViewTaskEdit

suspendHasChangesEventTaskEditBase

weekStartDayTaskEditBase

Properties

Common

disabledInstancePlugin

Class hierarchy

isTaskEdit: Boolean= truereadonly

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

isTaskEdit: Boolean= truereadonlystatic

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

isDelayableDelayable

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

isTaskEditBaseTaskEditBase

isTaskEditStmTaskEditStm

Editor

editor: TaskEditor

The editor widget used for editing task details. Provides an interface to modify task properties within the Gantt.

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents

isEditingTaskEditBase

minEditSizeTaskEdit

Functions

Other

editTask

Shows a TaskEditor to edit the passed task. This function is exposed on the Gantt instance and can be called as gantt.editTask().

Parameter	Type	Description
`taskRecord`	TaskModel	Task to edit
`element`	HTMLElement	The task element

Returns: Promise -

Promise which resolves after the editor is shown

addListenerEvents

cancelTaskEdit

createOnFrameDelayable

editEventTaskEdit

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

saveTaskEditBase

suspendEventsEvents

triggerEvents

unEvents

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Events

afterEventSaveTaskEdit

afterTaskEditTaskEdit

afterTaskSaveTaskEdit

beforeDestroyEvents

beforeEventDeleteTaskEdit

beforeEventSaveTaskEdit

beforeTaskDeleteTaskEdit

beforeTaskEditTaskEdit

beforeTaskEditShowTaskEdit

beforeTaskSaveTaskEdit

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

taskEditCanceledTaskEdit

Event handlers

onAfterEventSaveTaskEdit

onAfterTaskEditTaskEdit

onAfterTaskSaveTaskEdit

onBeforeDestroyEvents

onBeforeEventDeleteTaskEdit

onBeforeEventSaveTaskEdit

onBeforeTaskDeleteTaskEdit

onBeforeTaskEditTaskEdit

onBeforeTaskEditShowTaskEdit

onBeforeTaskSaveTaskEdit

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

onTaskEditCanceledTaskEdit

Typedefs

BryntumListenerConfigEvents

DelayableConfigDelayable

TaskEdit

Customizing tabs and their widgets

Expand to see Default tabs and fields

General tab

Predecessors tab

Successors tab

Resources tab

Advanced tab

Notes tab

Removing a built-in item

Customizing a built-in item

Adding a custom item

Manipulating TaskEditor items at run time

Configs

Common

Editor

Editor widgets

Misc

Other

Properties

Common

Class hierarchy

Editor

Lifecycle

Misc

Other

Functions

Other

Configuration

Events

Lifecycle

Misc

Events

Event handlers

Typedefs