TaskEdit

Feature that displays a Task editor, allowing users to edit task data. The Task editor is a popup containing tabs with fields for editing task data.

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

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.

To add extra items to a tab you need to specify items for the tab container.

This demo shows adding of custom widgets to the task editor, double-click child task bar to start editing:

Removing a built-in item or toolbar button

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

const scheduler = new SchedulerPro({
    features : {
        taskEdit : {
            items : {
                generalTab      : {
                    items : {
                        // Remove "Duration" and "% Complete" fields in the "General" tab
                        durationField    : false,
                        percentDoneField : false
                    }
                },
                // Remove all tabs except the "General" tab
                notesTab        : false,
                predecessorsTab : false,
                successorsTab   : false,
                advancedTab     : false
            },
            editorConfig : {
                bbar : {
                    // Remove delete button
                    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 scheduler = new SchedulerPro({
    features : {
        taskEdit : {
            items : {
                generalTab      : {
                    // Rename "General" tab
                    title : 'Main',
                    items : {
                        // Rename "% Complete" field
                        percentDoneField : {
                            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 scheduler = new SchedulerPro({
    features : {
        taskEdit : {
            items : {
                generalTab : {
                    items : {
                        // Add new field to the last position
                        newGeneralField : {
                            type   : 'textfield',
                            weight : 610,
                            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 : 10,
                            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 scheduler = new SchedulerPro({
    features : {
        taskEdit : false
    }
})

By default predecessors and successors in successorsTab and predecessorsTab are displayed using task id and a name. The id part is configurable, any task field may be used instead (for example wbsCode or sequence number) by Gantt dependencyIdField property, to set it globally, or using taskEdit config dependencyIdField to set format only for taskEditor.

const gantt = new Gantt({
   dependencyIdField: 'wbsCode', // for global format

   project,
   columns : [
       { type : 'name', width : 250 }
   ],
   features : {
        taskEdit : {
            editorConfig : {
                dependencyIdField : 'wbsCode' // set only for taskEditor
            }
        }
    }
});

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

Editing nested events

Note that when editing nested events the resource field, the successors tab and the predecessors tab are hidden automatically.

This feature is disabled by default in SchedulerPro and disabled in ResourceHistogram. For info on enabling it, see GridFeatures.