Upgrade guides for Gantt v5.0.0+
Gantt v5.0.0
Delaying calculations for faster initial render
Gantt now by default renders tasks faster than before after the initial load. This is achieved by postponing the engine calculations to after the initial rendering, using the raw data as is. Thus, it requires loading pre-normalized data to render correctly. When given un-normalized data it will render what it can and transition to the normalized result when calculations are finished.
During the calculation phase, the Gantt component is made read-only. Calculation progress is displayed as a small progress bar in the time axis header. If you prefer the old way of displaying progress, as a mask, you can configure it using the projectProgressReporting config:
new Gantt({
// Display progress in a mask instead of the default small progress bar
projectProgressReporting : 'mask'
})
If you run into issues with this new "early rendering" mode, you can turn it off at the project level using the delayCalculation config:
new ProjectModel({
// Do not postpone calculations to after rendering, calculate first and delay rendering instead
delayCalculation : false
})
In applications that have code which manipulates task records directly after load, the calculations (and setting up references etc.) might not yet have finished when your code executes. If this causes issues in your app, try waiting for them to finish before manipulating the tasks (or dependencies / resources / assignments):
// Wait for delayed initial calculations to be performed
await project.commitAsync();
// Tasks are now normalized, references and buckets are set up, etc.
// Perform your custom logic now...
if (project.taskStore.first.resources.length > 1) {
...
}
New scheduling issues handling popup
With this release Gantt starts displaying a popup informing about scheduling conflicts, cycles and calendar misconfigurations found. The user can then choose a suitable remedy.
In order to prevent the popup from showing please set displaySchedulingIssueResolutionPopup to false.
new Gantt({
// disable default scheduling resolution popup
displaySchedulingIssueResolutionPopup : false
});
DependencyModel.active field has been made persistable
The change means that the field will be sent to the server with other dependency data when persisting. It also means that the field will take part in undo/redo operations (since StateTrackingManager tracks persistable fields only).
In order to revert to previous behavior please override the field and set its persist config to false:
export class MyDependency extends DependencyModel {
static get fields() {
return [
{ name : 'active', persist : false }
];
}
}
Dependency "Active" field has been added to the dependency editor
New Active field has been added to the dependency editor. It allows disabling a dependency so it won't take part in the scheduling process.
To revert to old editor look and get rid of the field please use this code:
new Gantt({
...
features : {
dependencyEdit : {
// configure dependency editor to hide "Active" field
editorConfig : {
items : {
activeField : false
}
}
},
Task editor "Constraint type" field "keepTime" config has been changed to "entered"
This was done to not loose user provided time value. Previously it was false by default which resulted in stripping of time info of the provided value.
To revert to the old behavior please use this code:
new Gantt({
...
features : {
taskEdit : {
items : {
advancedTab : {
items : {
// adjust constraint type so it would strip time info
constraintDateField : {
keepTime : false
}
}
}
}
},
Changes to Engines ResourceAllocationInfo class
The Engine ResourceAllocationInfo class allocation property has been changed from an Array to an Object with two properties total and byAssignments. The total property contains an array of the resource allocation intervals. And the byAssignments is a Map keeping individual assignment allocation intervals with assignments as keys and arrays of allocation intervals as values.
Basically the old allocation property content has been moved to the new allocation.total property so you need to adjust your code accordingly.
Old code:
allocationInfo.allocation
New code:
allocationInfo.allocation.total
Manually scheduled tasks do not skip non-working time anymore
Manually scheduled tasks have been changed to not skip non-working time for their proposed start/end date values. This behavior is regulated by a new project skipNonWorkingTimeWhenSchedulingManually which is false by default. In order to revert to the previous behaviour when non-working time was skipped please set the config to true:
new SchedulerPro({
project : {
skipNonWorkingTimeWhenSchedulingManually : true,
...
}
});
ResourceHistogram tooltip change
The histogram getBarTip config has been deprecated in favor of new barTooltipTemplate config.
There are several differences between the two functions interfaces. The new barTooltipTemplate function accepts a single Object type argument whose properties provide the tooltip related info:
tip- The tooltip instanceactiveTarget- The target bar-element that triggered the showdatum- The hovered histogram bar info (third argument of deprecatedgetBarTipfunction)datum.rectConfig- The rectangle DOM configuration object (second argument of deprecatedgetBarTipfunction)
And the first argument (series) of deprecated getBarTip function is not supported by new barTooltipTemplate. Since it was decided it's not used.
Please change your code accordingly.
Old code:
new ResourceHistogram({
getBarTip : (series, rectConfig, datum, index) => {
return `<div class="my-tooltip">${datum.effort}</div>`;
}
})
New code:
new ResourceHistogram({
barTooltipTemplate : ({ datum, index }) => {
return `<div class="my-tooltip">${datum.effort}</div>`;
}
})
React wrappers now use module bundle
The React wrappers previously used the UMD bundle to import required classes:
Old code:
import { TaskModel } from '@bryntum/gantt.umd.js';
UMD bundle is not used anymore in the wrappers so the import line in the above code needs to be changed:
New code:
import { TaskModel } from '@bryntum/gantt';
Imports from @bryntum/gantt-react remain same.
Gantt v5.0.3
Validating backend responses by default
The validateResponse flag on ProjectModel has been changed to default to true. When enabled, it validates responses from the backend and outputs a message on console if the format isn't valid. This is helpful during the development phase, but can be turned off in production:
const gantt = new Gantt({
project : {
// Turn response validation off
validateResponse : false,
...
}
});
New Vue wrapper config option relayStoreEvents
This option was introduced to allow relaying of store events to the Gantt instance. It defaults to false (no events relayed) which changes the default behavior so if your application relies on relayed events, configure it as true.
Example:
<bryntum-gantt
:relayStoreEvents="true"
>
The config option applies to both Vue 2 and Vue 3.
Gantt v5.1.0
New module bundle for Angular
Bryntum Gantt is now delivered with new ES Module bundle without WebComponents. This was done to avoid conflicts with Angular which also uses WebComponents for applications.
Angular wrappers use gantt.module.js bundle in favor of removed gantt.lite.umd.js one.
Your Angular applications should be upgraded to use the new gantt.module.js bundle which is set as main for @bryntum/gantt NPM package.
Replace all application imports from Bryntum packages as shown below:
Old code:
import { Gantt } from '@bryntum/gantt/gantt.lite.umd.js';
New code:
import { Gantt } from '@bryntum/gantt';
New module bundle with WebComponents
Bryntum Gantt is now delivered with new gantt.wc.module.js ES Module bundle with WebComponents.
Your applications which use WebComponents and modules bundle should be upgraded to import from new gantt.wc.module.js instead of gantt.module.js.
Dependencies feature was refactored, drawForTask() not needed
As a result of a large refactoring of the Dependencies feature the drawForTask() fn was deprecated. Calling it should no longer be necessary.
Old code:
//... some action
gantt.features.dependencies.drawForTask(gantt.taskStore.first);
New code:
//... some action
Gantt v5.2.5
Wbs class has moved to Core
If you are using the Gantt/data/Wbs.js class, please update your imports to target the new Core/data folder.
Before:
import Wbs from 'Gantt/data/Wbs.js';
After:
import Wbs from 'Core/data/Wbs.js';
Gantt v5.3.0
Localization update
LocaleManager.registerLocale has been deprecated. LocaleHelper.publishLocale should be used instead.
Old code:
LocaleManager.registerLocale('Es', {
desc : 'Spanish', locale : {
localeName : 'Es',
localeDesc : 'Spanish',
locale : {
/* localization */
}
}
});
New code:
LocaleHelper.publishLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
LocaleManager.extendLocale has been deprecated. LocaleManager.applyLocale should be used instead.
Old code:
LocaleManager.extendLocale('Es', {
desc : 'Spanish', locale : {
locale : {
/* localization */
}
}
});
New code:
LocaleManager.applyLocale({
localeName : 'Es',
localeDesc : 'Spanish',
localeCode : 'es',
/* localization */
});
Check our localization guide for the details.
Gantt v5.3.3
Angular View Engine wrappers
New @bryntum/gantt-angular-view is designed to work with Angular 11 and older versions, which use the View Engine for rendering. If you are using one of the legacy Angular versions, please follow these steps to use the package:
Install the package using npm:
npm install @bryntum/gantt-angular-view@5.3.3
Import the component in your Angular application:
import { BryntumGanttComponent } from '@bryntum/gantt-angular-view';
Do not forget to remove previously used @bryntum/gantt-angular package which requires Angular 12 or newer version.
Please check Angular integration guide for additional information.
Gantt v5.4.0
Changes to Task bars CSS classes
The Gantt's Tasks now has the same eventColor field as the Scheduler's Events has. Because of this, a few changes to the Task bar's CSS classes has been made.
These SASS variables is no longer used:
$gantt-task-hover-background-color$gantt-task-parent-hover-background
TaskCopyPaste has been made asynchronous
The TaskCopyPaste feature's copyRows and pasteRows has been made asynchronous. This makes the beforeCopy and beforePaste events asynchronously preventable and allows for native Clipboard API support.
If your code relies on a copy or paste action to complete, you will need to wait for the promise to be resolved.
Old code:
function copyPaste()
{
gantt.copyRows();
doSomethingElse();
gantt.pasteRows();
finishDoingSomethingElse();
}
New code:
async function copyPaste()
{
await gantt.copyRows();
doSomethingElse();
await gantt.pasteRows();
finishDoingSomethingElse();
}
…or…
function copyPaste()
{
return gantt.copyRows().then(() => {
doSomethingElse();
gantt.pasteRows().then(() => {
finishDoingSomethingElse();
return true;
});
});
}
Gantt v5.5.0
Restructuring features
Internal development made it necessary to define two features specifically for Scheduler Pro and one for Scheduler:
Grid.feature.RowReorder->Scheduler.feature.RowReorderGrid.feature.CellEdit->SchedulerPro.feature.CellEditScheduler.feature.Dependencies->SchedulerPro.feature.Dependencies
If you extended those features to add some custom logic or imported feature directly from source, you need change base classes to the new ones and use correct import path.
Gantt v5.6.0
New location for Core.util.helper.Point class
The Core.util.helper.Point class has been moved to solve circular module dependencies. It is now a named (Point) export of the Core.util.helper.Rectangle module.
Changes are required if you are directly importing the class from sources:
Old code:
import Point from 'path-to-lib/Core/helper/util/Point.js';
New code:
import { Point } from 'path-to-lib/Core/helper/util/Rectangle.js';
Note: No changes required for importing from module or umd bundles.
Task bars use CSS grid layout
The task bar wrapper element (.b-gantt-task-wrap) now uses CSS grid layout to better match event bars in Scheduler. This makes it easier to internally share styling with Scheduler for features like labels. If your app uses custom CSS for task bars that rely on the wrapper using flexbox, you might need to adjust it.
ScrollOptions has been renamed to BryntumScrollOptions
If you use TypeScript in your application rename imported type ScrollOptions to BryntumScrollOptions.
Old code:
import { ScrollOptions } from '@bryntum/gantt'
New code:
import { BryntumScrollOptions } from '@bryntum/gantt'
Filter feature changed to multi-filter by default
The Filter feature has changed to use the new FieldFilterPicker-based UI in its popup by default. (This mode was previously accessible using the isMulti flag, which is now deprecated.)
The feature's context menus have also changed. Now, when right-clicking a grid cell or column header, the filtering options are under a new Filter sub-menu. The available filter operators have also changed to match the ones available in the FieldFilterPicker for the column's data type.
To provide custom configuration for the GridFieldFilterPickerGroup used in the popup UI, pass the new pickerConfig config to the Filter feature.
If you are using the isMulti flag in your Filter feature config, you can remove it as this mode is now the default.
- Old
isMultifeature configuration:
{
features : {
filter : { isMulti : true }
}
}
- New feature configuration (
isMultiflag no longer required):
{
features : {
filter : true
}
}
To use the old UI instead, configure legacyMode : true on the Filter feature.
- Old feature configuration:
{
features : {
filter : true
}
}
- New feature configuration (to opt out of new UI and keep the old):
{
features : {
filter : {
legacyMode : true
}
}
}
BryntumProjectModel component has been renamed to BryntumGanttProjectModel
The non-visual framework component representing a ProjectModel has been renamed to BryntumGanttProjectModel to match component name from new thin bundles.
Update imported class name and html tag accordingly.
Note: The old BryntumProjectModel component is still available too, it will be removed in version 6.0.0.
Angular
app.component.ts
import { BryntumGanttProjectModelComponent } from '@bryntum/gantt-angular';
app.component.html:
<bryntum-gantt-project-model
...
/>
React
App.ts:
import { BryntumGanttProjectModel } from '@bryntum/gantt-react';
...
return (
<>
<BryntumGanttProjectModel
...
/>
</>
);
}
Vue
App.vue:
<template>
<div>
<bryntum-gantt-project-model
...
/>
</div>
</template>
...
import { BryntumGanttProjectModel } from '@bryntum/gantt-vue-3';
Gantt v5.6.6
[DEPRECATED] BryntumProjectModel framework wrapper is deprecated
BryntumProjectModel framework wrapper will be removed starting from 6.0.0 version. Use BryntumGanttProjectModel instead.
Angular
app.component.ts:
import { BryntumGanttProjectModelComponent } from '@bryntum/gantt-angular';
app.component.html:
<bryntum-gantt-project-model
#project
// Project properties
/>
React
App.tsx:
import { BryntumGanttProjectModelComponent } from '@bryntum/gantt-react';
...
function App() {
return (
<>
<BryntumGanttProjectModel
ref={project}
// Project properties
/>
</>
);
}
Vue
App.vue:
<template>
<bryntum-gantt-project-model
ref="project"
// Project properties
/>
</template>
<script>
import { BryntumGanttProjectModel } from '@bryntum/gantt-vue-3';
export default {
components : {
BryntumGanttProjectModel
}
};
</script>
Gantt v5.6.7
CalendarModel intervals field is switched to sub-store
The intervals field of CalendarModel was changed in v5.3.0, but the change was not listed in the upgrade guide. Since v5.3.0 it behaves as a store when performing CRUD operations. The change should not affect you unless you have implemented calendars persisting on your backend.
After this change the calendars store CrudManager sync-response should change to this form:
"calendars" : {
"rows" : [
{
"id" : "business",
"intervals" : {
"rows" : [
{
"isWorking" : true,
"id" : 2,
"recurrentEndDate" : "on Mon at 09:00",
"recurrentStartDate" : "on Fri at 17:00"
}
]
}
}
]
}
As you can see intervals field response conforms to a regular store's format.
You can revert that field change back this way:
// Override CalendarModel to change "intervals" field
class MyCalendarModel extends CalendarModel {
static fields = [
{ name : 'intervals', subStore : false },
]
}
new Gantt({
project : {
// tell project to use the overridden model
calendarModelClass : MyCalendarModel
...
}
...
});