Migration from Older Versions

6.1 -> 6.2

The update to v6.2 is generally compatible with v6.1 and should not require any changes in code. However, some behavior of the component has been changed (old behavior can be restored via config), and some APIs has been deprecated.

Smart rendering and static background

Smart rendering functionality has been updated and is now embedded into the component. It should now work both in the main timeline area and in resource panels. From now on, all timelines should render only rows and cells that are currently visible.

Smart rendering can be disabled via the smart_rendering config, which will return gantt to the default behavior of v6.1:

gantt.config.smart_rendering = false;

The dhtmlxgantt_smart_rendering extension is no longer needed and should be removed from gantt. The extension itself is still available in the package in case of compatibility issues. If the extension is added to the page, gantt will revert to the v6.1 smart rendering mode.

The behavior of the static_background config has been updated as well. Starting from v6.2 it will render PNG background AND any cells that have CSS class attached to them via template function.

If you need to revert to v6.1 behavior, use the static_background_cells config:

gantt.config.static_background_cells = false;

Time scale settings

Configuration of time scale has been simplified. Instead of specifying a bunch of scale settings for each scale separately, now you should use just one configuration option scales that will contain a number of scale objects with settings for them.

All in all, the following time scale APIs are deprecated:

  • gantt.config.scale_unit
  • gantt.config.step
  • gantt.config.date_scale
  • gantt.templates.date_scale
  • gantt.config.subscales

For example, the code below:

gantt.config.scale_unit = "day"; 
gantt.config.step = 1; 
gantt.config.date_scale = "%d %M"; 
gantt.templates.date_scale = null; 
gantt.config.subscales = [];

Now looks like this:

gantt.config.scales = [ { unit:"day", step: 1, format: "%d %M"} ];

task_cell_class template renamed

The template used to define the CSS class applied to the cells of the timeline area is renamed as follows:

An example of using the renamed template is:

<style>
.weekend{ background: #f4f7f4 !important;}
</style>
 
gantt.templates.timeline_cell_class = function(task,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend";
    }
};

"xml_date" config and template, and "xml_format" templates are renamed

Below there is the scheme of replacing previously used API:

Since v6.2 the default values of the xml_date config, and xml_date and xml_format templates are undefined. Thus if you haven't assigned any values to them, they won't work.

However, Gantt will continue to use the old names of the config and templates, so if you've redefined those APIs in your code, they will work as before. For example:

// will work correctly
gantt.templates.xml_date = function(datestring){
    return new Date(datestring);
};

Unused API removed

The gantt.config.api_date config and gantt.templates.api_date template are removed from API as they weren't used inside gantt code. If you've used them in your code, you need to declare them once again.

gantt.config.api_date = "%d-%m-%Y %H:%i";
gantt.templates.api_date = gantt.date.date_to_str(gantt.config.api_date);

6.0 -> 6.1

Time constraints and auto scheduling

The dhtmlxgantt_auto_scheduling.js extension is upgraded with the tasks constraints functionality. Since this feature modifies the default behavior of auto scheduling, Gantt supports the compatibility mode that allows you to restore the previous behavior and not to take into account tasks constraints during auto scheduling.

To enter the compatibility mode, make use of the following configuration option:

gantt.config.auto_scheduling_compatibility = true;

Tooltips displaying area

Before version 6.1 tooltips have been displayed only inside the timeline area. After v6.1 release tooltips displaying isn't limited, and a tooltip follows the movement of the mouse pointer.

If necessary, you can restore the previous behavior by using the code below before initialization of Gantt:

gantt.attachEvent("onGanttReady", function(){
    var tooltips = gantt.ext.tooltips;
    tooltips.tooltip.setViewport(gantt.$task_data);
});
 
gantt.init("gantt_here");
gantt.parse(demo_tasks);

5.2 -> 6.0

In the version 6.0 the getSlack() method is deprecated. Two methods are added instead:

Methods marked as deprecated in v4.0 stopped working in v6.0. The dhtmlx object definition was removed from dhtmlxgantt.js.

If you use any of the obsolete methods, you'll need to replace them with supported implementations according to the table below. No changes in the arguments or behavior of the methods were made.

Obsolete methodsWorking methods
dhtmlx.alertgantt.alert
dhtmlx.confirmgantt.confirm
dhtmlx.modalboxgantt.modalbox
dhtmlx.uidgantt.uid
dhtmlx.copygantt.copy
dhtmlx.mixingantt.mixin
dhtmlx.definedgantt.defined
dhtmlx.bindgantt.bind
dhtmlx.assertgantt.assert
window.dataProcessorgantt.dataProcessor

3.x -> 4.0

Version 4.0 introduces some changes in public API, namely:

  • legacy modules as well as the modules that intersect with dhtmlxSuite modules are no longer defined by the dhtmlxGantt library
  • commonly used modules, such as dhtmlxMessage, dataProcessor, Ajax are moved to the window.gantt namespace and became a part of dhtmlxGantt public API

A fallback to the old API is included in v4.x, so the code written for v3.3 and earlier will continue working. However in some cases changes are required. Generally, all global declarations, except for window.gantt and window.Gantt (enterprise version only) are deprecated and will be removed in version 5.0.

Deprecated API

There are methods that have been deprecated. They will continue working in v4.x, but will trigger a console warning (not visible to the end users) each time they are called.

Overview:

  • dhtmlxMessage module has been moved from the window.dhtmlx object to the window.gantt object. Read more about Message Boxes here
  • dhtmlxDataProcessor constructor has been moved from window.dataProcessor to window.gantt.dataProcessor
  • utility methods such as dhtmlx.copy, dhtmlx.uid and dhtmlx.mixin have been moved to window.gantt object

If you use these methods, your application will continue working after updating to v4.0 without requiring any immediate changes. In future we recommend updating them to a newer version of the API.

The complete list of deprecated methods includes:

Up to version 3.3From version 4.0
dhtmlx.alertgantt.alert
dhtmlx.confirmgantt.confirm
dhtmlx.modalboxgantt.modalbox
dhtmlx.uidgantt.uid
dhtmlx.copygantt.copy
dhtmlx.mixingantt.mixin
dhtmlx.definedgantt.defined
dhtmlx.bindgantt.bind
dhtmlx.assertgantt.assert
window.dataProcessorgantt.dataProcessor

Obsolete API

Some methods have become obsolete and will no longer be used in v4.x. If you still use these methods or objects, you'll need either to modify the code of an application or to include the dhtmlxgantt_deprecated.js file to the page.

Overview:

  • window.dhx4 is no longer defined by dhtmlxgantt.js
  • Environment variables that were defined in window.dhx4 are now available in the gantt.env object
  • Ajax module has been moved from dhx4.ajax to gantt.ajax
  • gantt.event, gantt.eventRemove should be used instead of dhtmlxEvent/dhtmlxDetachEvent

The whole list of the obsolete API is given below:

Up to version 3.3From version 4.0
window.dhtmlxEventgantt.event
window.dhtmlxDetachEventgantt.eventRemove
window.dhx4.isIEgantt.env.isIE
window.dhx4.isIE6gantt.env.isIE6
window.dhx4.isIE7gantt.env.isIE7
window.dhx4.isIE8gantt.env.isIE8
window.dhx4.isOperagantt.env.isOpera
window.dhx4.isChromegantt.env.isChrome
window.dhx4.isKHTMLgantt.env.isKHTML
window.dhx4.isFFgantt.env.isFF
window.dhx4.isIPadgantt.env.isIPad

2.0 -> 3.0

1) In order to prevent CSS conflicts with dhtmlxScheduler, the class names that have been used by both components were renamed in dhtmlxGantt (all classes were related to the lightbox). If you have customized styling for the lightbox, the migration will consist in renaming to appropriate CSS classes.

There is 2 renamed patterns:

  • Replace '.dhx_gantt_' to '.gantt_' (.dhx_gantt_duration -> .gantt_duration)
  • Replace '.dhx_' prefix with '.gantt_' (.dhx_custom_button -> .gantt_custom_button)

If you encounter difficulties with migrating CSS classes,please, see the full list of renamed classes here.


2) The default values of the buttons_right and buttons_left configs were changed in the following way:

gantt.config.buttons_left = [
        "dhx_save_btn",
        "dhx_cancel_btn"
];
gantt.config.buttons_right = [
        "dhx_delete_btn"
],
 
-->
 
gantt.config.buttons_left = [
        "gantt_save_btn",
        "gantt_cancel_btn"
];
gantt.config.buttons_right = [
        "gantt_delete_btn"
];

Old configurations ( "dhx_save_btn", "dhx_cancel_btn", "gantt_delete_btn") will still work. Changes does not break any existing behavior.

3) The following features are now available only in the Commercial or Enterprise version of the component (not available in the GPL version of dhtmlxGantt):

  • Ability to hide days in week, month, timeline view
  • Projects, milestones and other custom types

1.0 -> 2.0

1) A variety of objects (GanttProjectInfo, GanttTaskInfo, GanttChart, GanttProject, GanttTask) are replaced with 1 static object - gantt.
The gantt object contains a set of methods and 2 main properties: config and templates.

  • gantt.config - configuration options for dates, scale, controls etc.
  • gantt.templates - formatting templates for dates and labels used in the Gantt chart.


2) dhtmlxGantt is initialized through the init method
var gantt = new GanttChart() -> gantt.init("gantt_div").


3) Instead of GanttProject and GanttTask, data is stored as an array of plain objects with a number of mandatory properties and any custom properties:

{
    data:[
        {id:1, text:"Project #2", start_date:"01-04-2013", duration:18,
    progress:0.4, open: true},
        {id:2, text:"Task #1",    start_date:"02-04-2013", duration:8,
    progress:0.6, parent:1},
        {id:3, text:"Task #2",    start_date:"11-04-2013", duration:8,
    progress:0.6, parent:1}
    ],
    links:[
        { id:1, source:1, target:2, type:"1"},
        { id:2, source:2, target:3, type:"0"},
        { id:3, source:3, target:4, type:"0"},
        { id:4, source:2, target:5, type:"2"},
  ]
}


4) The XML format was changed but the old XML format is still can be loaded.

gantt.load("tasks.xml","oldxml");

Related sample:  Loading data in Gantt 1.6 format


5) Design-time Objects:


6) Run-time Objects:

dhtmlxGantt 2.0 doesn't use different types for project and task objects. Instead of this, any task object can have 1 parent object and any number of child tasks.

  • GanttProject
    • Instead of getDuration(), getId(), getName(), getPercentCompleted(), getStartDate(), project properties are accessed through gantt.getTask(projectTaskId).{name_of_property}
  • GanttTask
    • Instead of getDuration(), getId(), getName(), getParentTaskId(), getPercentCompleted(), getPredecessorTaskId(), setDuration(, ) task properties are accessed through gantt.getTask(taskId).{name_of_property}

A list of methods to get parent/child objects:

The id of the parent task can be accessed as gantt.getTask(task_id).parent. The root element doesn't have the 'parent' property.

Back to top