Upgrade guide for Gantt v7.0.0

New themes, styling & FontAwesome changes

This release has extensive changes in the styling of all Bryntum products, and any custom themes and app styling will need to be updated. See Grid's upgrade guide for more information.

Assignment field picker has changed to TabPanel

The assignment field picker has changed its base class from Grid to TabPanel. Now it has a separate tab per each resource type: "Work", "Material" and "Cost". And each tab contains a grid listing resources of corresponding types.

Updating old AssignmentField picker customizations

The picker by default displays only tabs for types of resources presented in the resource store. So existing applications mostly won't have to change anything to preserve their current behavior unless resources of new types are added.

Yet if there is some Grid configuration applied to the field picker it has to be updated since the picker is now a TabPanel which has different set of configs.

In order to support existing customization we added support for columns and features configs. The columns config on the picker will target "Work"-type grid and features will be applied to all underlying Grids.

When specifying columns the Gantt will dump a warning to the browser console unless you update your code to explicitly target a certain Grid. For example here is some old code adding resource "Calendar" column:

new Gantt({
    ...
    columns : [
        {
            type   : 'resourceassignment',
            editor : {
                type   : 'assignmentfield',
                // The picker config is applied to the Grid
                picker : {
                    // The extra columns are concatenated onto the base column set.
                    columns : [{
                        text  : 'Calendar',
                        field : 'resource.calendar.name'
                    }]
                }
            }
        }
    ]
});

It has to be changed to address Work-type resource Grid in the future:

new Gantt({
    ...
    columns : [
        {
            type   : 'resourceassignment',
            editor : {
                type   : 'assignmentfield',
                picker : {
                    items : {
                        // config applied to the Work-type resource Grid
                        workTab : {
                            // The extra columns are concatenated onto the base column set.
                            columns : [{
                                text  : 'Calendar',
                                field : 'resource.calendar.name'
                            }]
                        }
                    }
                }
            }
        }
    ]
});

Force hiding of all new tabs

In order to have a guaranteed rollback to the previous look of the field please use the following code. It won't change the TabPanel back to the Grid but will hide new extra tabs:

new Gantt({
    ...
    columns : [
        {
            type : 'resourceassignment',
            editor : {
                picker : {
                    // disable automatic toggling of resource type tabs based on existing resources
                    autoHideResourceTypeTabs : false,
                    items                    : {
                        workTab : {
                            tab : {
                                // hide the only visible tab button
                                hidden : true
                            }
                        },
                        // hide "Cost" tab
                        costTab : {
                            hidden : true
                        },
                        // hide "Material" tab
                        materialTab : {
                            hidden : true
                        }
                    }
                }
            }
        }
    ]
});

Resource utilization view

The resource utilization view has changed to adopt new types of resources as well. In addition to displaying effort data the view now has two more series: cost and quantity that display resource cost and material expenditure respectively. The quantity is naturally collected for the resources of material-type only. While cost can be collected for all types of resources.

By default the view behaves in a backward compatible way and displays only effort data. Yet if you enable the new series and had customized localization of the view tooltips then you'll have to review the changes to display new resource types.

Old default En locale:

    ResourceUtilization : {
        barTipInRange         : '<b>{event}</b> {startDate} - {endDate}<br><span class="{cls}">{allocated}</span> allocated',
        barTipOnDate          : '<b>{event}</b> on {startDate}<br><span class="{cls}">{allocated}</span> allocated',
        groupBarTipAssignment : '<b>{event}</b> - <span class="{cls}">{allocated}</span>',
        groupBarTipInRange    : '{startDate} - {endDate}<br><span class="{cls}">{allocated} of {available}</span> allocated:<br>{assignments}',
        groupBarTipOnDate     : 'On {startDate}<br><span class="{cls}">{allocated} of {available}</span> allocated:<br>{assignments}',
        ...
    }

New default En locale:

    ResourceUtilization : {
        effortRangeInfo       : '<span>effort: <span class="{cls}">{allocated} of {available}</span></span>',
        effortInfo            : '<span>effort: <span class="{cls}">{allocated}</span></span>',
        costInfo              : '<span>cost: <span>{cost}</span></span>',
        quantityInfo          : '<span>quantity: <span>{quantity}</span></span>',
        barTipInRange         : '<b>{event}</b> {startDate} - {endDate}<br>{effort-info}{cost-info}{quantity-info}',
        barTipOnDate          : '<b>{event}</b> on {startDate}<br>{effort-info}{cost-info}{quantity-info}',
        groupBarTipAssignment : '<b>{event}</b> ({effort-info}{cost-info}{quantity-info})',
        groupBarTipInRange    : '{startDate} - {endDate}{effort-range-info}{cost-info}{quantity-info}<div>{assignments}</div>',
        groupBarTipOnDate     : 'On {startDate}<br>{effort-range-info}{cost-info}{quantity-info}<div>{assignments}</div>',
        ...
    }

As you can see above effort, cost and quantity info have been moved to separate effortRangeInfo, effortInfo, costInfo and quantityInfo locales. Which are then injected into places marked with {effort-range-info}, {effort-info}, {cost-info} and {quantity-info} tags. So if your application had customized the locales you'll have to update the code.

Dragging all selected tasks by default

The TaskDrag feature now defaults to dragging all selected tasks. To revert to the previous behavior set its dragAllSelectedTasks config to false:

Old code

new Gantt({
    features : {
        taskDrag : true
    }
});

New code

new Gantt({
    features : {
        taskDrag : {
            dragAllSelectedTasks : false
        }
    }
});

Tracking project settings changes by default

When syncing project changes (or querying project.changes), changed project settings are now included by default. To revert to the old behavior, set trackProjectSettings to false when configuring the project:

Old code

const gantt = new Gantt({
    project : {
        syncUrl : 'someUrl',
    }
});

New code

const gantt = new Gantt({
    project : {
        syncUrl              : 'someUrl',
        trackProjectSettings : false
    }
});

Resizable task editor

The task editor is now resizable by default. To disable this behavior, set its resizable config to false:

Old code

const gantt = new Gantt({
    // Task editor enabled by default, but not resizable
});

New code

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

DatePicker's cellRenderer context

DatePicker's cellRenderer is now passed the cell element as the cell property of its render context. The inner element into which new content can be added is passed as innerCell. Previously the inner element was passed in the cell property. This will only affect your apps if you have implemented a cellRenderer in any DatePicker

Old code

cellRenderer({ cell, date }) {
    cell.innerHTML += `<b>${getValueForDate(date)}</b>`;
}

New code

cellRenderer({ innerCell, date }) {
    innerCell.innerHTML += `<b>${getValueForDate(date)}</b>`;
}

Project autoPostponedConflicts has been renamed

ProjectModel class autoPostponedConflicts field has been renamed to autoPostponeConflicts to better comply with other similar config names. The old name is deprecated so please change your code accordingly:

Old code

const gantt = new Gantt({
    project : {
        autoPostponedConflicts : true
    }
});

New code

const gantt = new Gantt({
    project : {
        autoPostponeConflicts : true
    }
});

Conflicts postponing related changes

The TaskModel class hasPostponedOwnConstraintConflict field has been renamed to postponedConflict. So the old field name has been deprecated and its support will be dropped in a future release.

Also the conflicts postponing logic has been changed. It used to cover only cases when a task own constraint contradicted with its dependency but now it covers all scheduling conflicts. If you need to revert to the old logic please use the following code:

ProjectModel({
    // enable BW compatibility mode when conflicts postponing tracked only own constraint vs dependency case
    bwcConflictPostpone : true
})

Also please let us know on the forums if you need the outdated logic since we have plans on removing bwcConflictPostpone config on a future release.