Upgrade guides for Gantt v6.0.0+
Gantt v6.0.0
Manually scheduled tasks no longer extend over non-working time
Manually scheduled tasks no longer take into account working time calendars by default. The default value for skipNonWorkingTimeInDurationWhenSchedulingManually is now false. If you want manually scheduled tasks to respect working time settings, you have to configure it as true:
const gantt = new Gantt({
project : {
// manually scheduling tasks duration should respect calendars
skipNonWorkingTimeInDurationWhenSchedulingManually : true
}
});
Checking your data for Calendar editor support
This release introduces the calendar editor - a special widget allowing to edit calendar data. For recurring calendar intervals we use the Later JS library under the hood. Its syntax is quite rich which is good. But the downside is it's tricky to cover all its possible configurations in the UI. Thus the calendar editor at the moment supports only the most common cases used by the calendars.
You can check if the new editor supports your data by calling the calendarManagerStorevalidateAllRecordsForCalendarEditor method after the data is loaded:
calendarManagerStore.validateAllRecordsForCalendarEditor();
That will report found errors to the browser console. If nothing is reported the data is good.
For instance the calendar editor data does not support so called composite schedules (rules looking like {rule1} and {rule2} or {rule1} except {rule2}). Let's say we have a "Working hours" calendar with the following unsupported rules:
{
"recurrentStartDate" : "at 8:00 except on Saturday and Sunday",
"recurrentEndDate" : "at 17:00 except on Saturday and Sunday",
"isWorking" : true
},
So if we trigger calendars validation:
// validate all calendars in the store
calendarManagerStore.validateAllRecordsForCalendarEditor();
That will dump a warning in the browser console:
CalendarEditorStore: The "Working hours" calendar interval cannot be handled. Please copy its data and
report to https://bryntum.com/forum :
{
"id": "_generatedModelClass_9ce06c8d-df47-4d4d-921b-3b51fd806e98",
"recurrentStartDate": "at 8:00 except on Saturday and Sunday",
"recurrentEndDate": "at 17:00 except on Saturday and Sunday",
"isWorking": true,
"availability": null
}
In that exact case the rules can be easily changed to a non-composite look:
{
"recurrentStartDate" : "every weekday at 8:00",
"recurrentEndDate" : "every weekday at 17:00",
"isWorking" : true
}
And other similar "composite cases" could require breaking an interval into multiple ones with simple rules. Or you could just try making them manually with the calendar editor.
As always if you face a case you cannot implement report us: https://bryntum.com/forum
New styling for the Grid header bottom border in timeline-based views
The bottom border styling of the Grid header was moved from the .b-grid-header-container element to .b-grid-headers in non-timeline sub-grids and .b-horizontaltimeaxis in the timeline sub-grid
Old styling modifying the grid header:
.b-grid-header-container {
border-bottom : none;
}
New styling:
.b-gantt {
.b-header:not(.b-grid-header-scroller-normal) .b-grid-headers,
.b-horizontaltimeaxis {
border-bottom : none;
}
}
New format returned from Gantt's ProjectModel#toJSON
Now it returns tasksData instead of eventsData.
Old format
{
eventsData : [
{ id : 1, name : 'Proof-read docs', startDate : '2017-01-02', endDate : '2017-01-09' },
{ id : 2, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
],
resourcesData : [
{ id : 1, name : 'Arcady' },
{ id : 2, name : 'Don' }
],
dependenciesData : [
{ fromTask : 1, toTask : 2 }
],
assignmentsData : [
{ 'event' : 1, 'resource' : 1 },
{ 'event' : 2, 'resource' : 2 }
];
}
New format
{
tasksData : [
{ id : 1, name : 'Proof-read docs', startDate : '2017-01-02', endDate : '2017-01-09' },
{ id : 2, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
],
resourcesData : [
{ id : 1, name : 'Arcady' },
{ id : 2, name : 'Don' }
],
dependenciesData : [
{ fromTask : 1, toTask : 2 }
],
assignmentsData : [
{ 'event' : 1, 'resource' : 1 },
{ 'event' : 2, 'resource' : 2 }
]
}
BryntumProjectModel framework wrapper removed
BryntumProjectModel framework was replaced by BryntumGanttProjectModel in v5.6.6, and is no longer available.
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>
New location for Core.util.helper.Point class
The Core.util.helper.Point class was moved in v5.6.0 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
Since v5.6.0, the task bar wrapper element (.b-gantt-task-wrap) 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 was changed in v5.6.0 to use the new FieldFilterPicker-based UI in its popup by default. (This mode was previously accessible using the isMulti flag, which is now removed.)
The feature's context menus was also changed. When right-clicking a grid cell or column header, the filtering options are under a new Filter sub-menu. The available filter operators was 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.
- 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
}
}
}
Restructured features
Internal development made it necessary in v5.5.0 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.
Changes to Task bars CSS classes
In v5.4.0 the Gantt's Tasks gained the same eventColor field as the Scheduler's Events has. Because of this, a few changes to the Task bar's CSS classes was made.
These SASS variables are no longer used:
$gantt-task-hover-background-color$gantt-task-parent-hover-background
TaskCopyPaste was made asynchronous
The TaskCopyPaste feature's copyRows and pasteRows was made asynchronous in v5.4.0. 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;
});
});
}
Angular View Engine wrappers for Angular 11 and older versions
In v5.3.3 a new @bryntum/gantt-angular-view package designed to work with Angular 11 and older versions was added, 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.
Localization update
LocaleManager.registerLocale was deprecated in 5.3.0 and has now been removed. 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 was deprecated in 5.3.0 and has now been removed. 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.
Wbs class moved to Core
In v5.2.5 the Gantt/data/Wbs.js class was moved to Core/data/Wbs.js. The old file is no longer available.
Before:
import Wbs from 'Gantt/data/Wbs.js';
After:
import Wbs from 'Core/data/Wbs.js';
New module bundle for Angular
Bryntum Gantt is since v5.1.0 delivered with a 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 v5.1.0
Bryntum Gantt is since v5.1.0 delivered with a 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() remove
As a result of a large refactoring of the Dependencies feature in v5.1.0, the drawForTask() fn was deprecated and has now been removed.
Old code:
//... some action
gantt.features.dependencies.drawForTask(gantt.taskStore.first);
New code:
//... some action
Validating backend responses by default
The validateResponse flag on ProjectModel was changed in v5.0.3 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 in v5.0.3 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.
Store now defaults to use raw data for remotely loaded data
The useRawData setting on Store is now enabled by default when data is loaded remotely using an AjaxStore or a CrudManager (the ProjectModel), but with all sub-settings disabled. This will boost load performance slightly, by not cloning the incoming data objects.
If you want to restore the previous behavior, you can set useRawData : false on the store:
const gantt = new Gantt({
project : {
taskStore : {
useRawData : false
}
}
});
Or for all project stores:
const gantt = new Gantt({
project : {
useRawData : false
}
});
Removed fetchOptions and requestConfig from ProjectModel.transport
The previously (in v5.0.0) deprecated fetchOptions and requestConfig properties of ProjectModel.transport.load and ProjectModel.transport.sync were removed in v6.0.0. Any settings passed in those properties can instead be passed directly on the upper level (in the load or sync configuration objects).
Old code:
const gantt = new Gantt({
project : {
transport : {
load : {
fetchOptions : {
credentials : 'include'
}
}
}
}
});
New code:
const gantt = new Gantt({
project : {
transport : {
load : {
credentials : 'include'
}
}
}
});
EventModeColumn has been removed
The EventModeColumn no longer exists, instead you should use ManuallyScheduledColumn
Old code:
columns : [
{ type : 'eventmode' }
]
New code:
columns : [
{ type : 'manuallyscheduled' }
]
Gantt selectionMode rowNumber now uses Gantt´s SequenceColumn instead of the RowNumberColumn
The RowNumberColum is no longer used as it is confusing in a tree grid, and instead the SequenceColumn is used in the Gantt chart when rowNumber is set to true in the gridSelection config object.
If you want to revert to the old behavior, please use the code below:
const gantt = new Gantt({
selectionMode : {
cell : true,
rowNumber : {
type : 'rownumber'
}
}
});
If you are using the RowResize feature targeting the RowNumberColumn, you will need to update the code as per below:
Old code:
rowResize : {
cellSelector : '.b-rownumber-cell'
},
New code:
rowResize : {
cellSelector : '.b-sequence-cell'
},
Gantt v6.0.2
TimelineHistogram, ResourceHistogram and ResourceUtilization classes getRectClass config is deprecated
TimelineHistogram class getRectClass config is deprecated in favor of new getBarClass config to make naming more consistent. The old config is still there but will be eliminated in v7.0.0 release so please make sure you code is updated respectively.
Old code:
new ResourceHistogram({
getRectClass : () => {
...
}
})
New code:
new ResourceHistogram({
getBarClass : () => {
...
}
})
Gantt v6.1.6
Suspended tasks support in msprojectimport demo
Starting with this release, msprojectimport demo represents suspended and then resumed tasks with segments field. If you don't want this behavior please change use.segments.for.suspended config in the main/resources/META-INF/projectreader.properties file included in the demo to false:
use.segments.for.suspended=false
Gantt v6.2.0
EventColorPicker record config is deprecated
The record config of EventColorPicker has been deprecated in favor of the new records config, which allows changing the color property for multiple selected records. The old record config is still there, but it will be removed in the v7.0.0 release. Please update your code accordingly.
Old code:
new EventColorPicker({
record : firstTask
})
New code:
new EventColorPicker({
records : [firstTask]
})
AjaxHelper.fetch credentials change
The AjaxHelper.fetch() utility function is used by AjaxStore and ProjectModel to fetch data from the server. Previously it by default used the credentials: 'include' option, which meant that cookies were always sent with the request. To better match the default behavior of the native fetch API, our default value has been removed (thus it instead uses 'same-origin', which is the native default). If you want to restore the old behavior, you can do so using AjaxHelper.DEFAULT_FETCH_OPTIONS:
Old code
new ProjectModel({
loadUrl : 'load.php',
autoLoad : true
})
New code
AjaxHelper.DEFAULT_FETCH_OPTIONS = { credentials : 'include' };
new ProjectModel({
loadUrl : 'load.php',
autoLoad : true
})
Gantt v6.3.0
Naming simplification for project data properties
The ProjectModel can consume inline data for the different sorts of entities it supports: tasks, resources, assignments, dependencies, time ranges and calendars.
In the past, the configs and properties related to this has been named according to [entityName]Data: tasksData, resourcesData, assignmentsData, dependenciesData, timeRangesData, calendarsData.
This has been simplified to only [entityName]: tasks, resources, assignments, dependencies, timeRanges and calendars.
The old properties are still available but are marked as deprecated and will be removed in a future release. We recommend you update the names used in your code to avoid breakage later.
Old code
const gantt = new Gantt({
project : {
tasksData : [ ... ],
resourcesData : [ ... ],
assignmentsData : [ ... ]
}
})
New code
const gantt = new Gantt({
project : {
tasks : [ ... ],
resources : [ ... ],
assignments : [ ... ]
}
})
This change also applies to APIs that get or set the data on the ProjectModel, such as inlineData, and json. For example:
Old code
const { inlineData } = gantt.project;
// inlineData would previously have `tasksData`, `resourcesData` etc. properties
New code
const { inlineData } = gantt.project;
// inlineData now has `tasks`, `resources` etc. properties.
// Note that the old properties are still included too
API to highlight critical task rows in the Grid
Added a new config highlightCriticalRows on the CriticalPaths feature to highlight the critical task rows in the Grid. To enable it, please set the highlightCriticalRows : true on CriticalPaths feature. When enabled, a b-critical class is added to critical task rows and they get highlighted. Previously, critical rows were highlighted using a combination of custom code which is not required anymore.
Old code:
class Task extends TaskModel {
static $name = 'Task';
get cls() {
return Object.assign(super.cls, { 'b-critical' : this.critical });
}
}
new Gantt({
features : {
criticalPaths : {
disabled : false
}
},
project : {
taskModelClass : Task
}
})
New code:
new Gantt({
features : {
criticalPaths : {
disabled : false,
highlightCriticalRows : true
}
},
})
Re-enabled early rendering for projects loaded using the CRUD manager
When using early rendering (the default, tasks are rendered before scheduling calculations take place), we did not actually render early when loading data using the projects CRUD manager functionality. This was an oversight when we added support for project settings to the CRUD manager a while back.
This has now been fixed, and early rendering is once again enabled for projects loaded using the CRUD manager. As a result, any renderers you have configured (e.g. for tasks, baselines etc.) might now be called earlier than before, and with unscheduled data. If you are supplying incomplete task data (e.g. without one of startDate, endDate, duration), you might need to adjust your renderers to handle this correctly.
Old code
const gantt = new Gantt({
project : {
loadUrl : '/api/projects',
autoLoad : true
},
taskRenderer({ taskRecord }) {
// If endDate was not passed in the data, it might be
// null here on first call with early rendering
if (taskRecord.endDate.getTime() < someTimeStamp) {
return 'This task is before some time';
}
return 'This task is after some time';
}
});
New code
const scheduler = new SchedulerPro({
project : {
loadUrl : '/api/projects',
autoLoad : true
},
taskRenderer({ taskRecord }) {
if (!taskRecord.endDate) {
// Handle case where called before scheduling calculations
return 'This event has no end date yet';
}
if (taskRecord.endDate.getTime() < someTimeStamp) {
return 'This task is before some time';
}
return 'This task is after some time';
}
});