ProjectEdit

Feature that displays the project editor allowing users to edit the project settings.

This demo shows the project edit feature, click "Edit project" button 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.

This example shows a custom Project Editor configuration. The built-in "Description" tab is hidden, the "General" tab is renamed to "Common" and "Custom" field is appended to it. Click "Edit project" button to start editing::

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 : {
        projectEdit : {
            items : {
                generalTab  : {
                    items : {
                        // Remove the "Calendar" field in the "General" tab
                        calendarField : false
                    }
                },
                // Remove all tabs except the "General" tab
                descriptionTab : false,
                advancedTab    : false
            }
        }
    }
})

The built-in buttons are:

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

const gantt = new Gantt({
    features : {
        projectEdit : {
            editorConfig : {
                bbar : {
                    items : {
                        cancelButton : 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 : {
        projectEdit : {
            items : {
                generalTab : {
                    // Rename "General" tab
                    title : 'Main',
                    items : {
                        // Rename "Calendar" field
                        calendarField : {
                            label : 'Work time'
                        }
                    }
                }
            }
        }
    }
})

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 project record:

const gantt = new Gantt({
    features : {
        projectEdit : {
            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',
                    // provide weight less than General tab has to make sure this tab goes first
                    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 project "name" field.
                            name   : 'name'
                        }
                    }
                }
            }
        }
    }
})

Manipulating ProjectEditor items at run time

To change input items depending upon the project being edited, use a beforeProjectEditShow 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 : {
        projectEdit : true
    },
    listeners : {
        beforeProjectEditShow({ projectRecord, editor }) {
            // if editing a project having non empty startDate value.
            if (projectRecord.startDate) {
                // do not allow editing the project start date
                editor.widgetMap.startDate.disabled = true;
            }
        }
    }
});

This feature is disabled by default