dhtmlxGantt 2.0 (development version)

Update : Online doc is available at docs.dhtmlx.com/gantt, the package was updated on September 03. If you want to try the new features - please re-download the package.

We plan to release the new version of dhtmlxGantt in September. If interested, you can now download the latest development version:


If you have worked with dhtmlxScheduler, you can easily understand the API. Note that this is a development version and we continue adding features and fixing bugs. We are still working on the documentation for the new version but you can see the demos included in the package and try the new features of dhtmlxGantt.

The main new features of dhtmlxGantt 2.0 are:


  • Works on both desktop and mobile touchscreen devices

Look and Feel

  • All text labels and date formats are configurable
  • 4 customizable skins
  • Localization support
  • Color and texts of each task can be customized
  • The ability to color specific rows or date-columns

Server-Side Support

  • The ability to load data from JSON|XML
  • GanttConnector for PHP, Java, ASP.NET
  • Supports custom data saving logic


  • Built-in lightbox for editing task details
  • Full support for tooltip and quick-info panels
  • Multi-line, configurable headers
  • Dynamic time-zooming

Gantt Chart Specific

  • Support for all types of dependency linking
  • Dependency links can be created by drag-and-drop (optional)
  • Visual progress marking (optional)
  • Configurable TreeGrid of data
  • Drag-and-drop of tasks and drag-and-drop of rows in grid

If you have any comments or suggestions or would like to report a bug, feel free to leave your feedback here.

Some screenshots:

The new charts look good! Great Job!

I am not able to scale the current gantt chart.

I want to display months instead of days.

Is it possible or will it be unveiled in the new version?

Sagnik, this feature will be available in the new version of dhtmlxGantt. You can check the demos placed in the ‘samples/03_scales/’ folder of the dev. version.

In the absence of proper documentation for the charts, I am having some trouble.

Can you please help me?

I want to load data from an inline data set similar to how we load in the scheduler using json.

Can you direct me to a related example in the files? That will be a lot of help.


In the Beta Charts I mean.


Successfully Implimented.


Dear Inga,

I need help with something else. How do I save back into the database?

Just direct me to some examples please.



data can be saved with dhtmlxDataProcessor and dhtlmx connector for gantt. You can also do back-end saving without a connector, gantt uses the same data processor protocol as other dhtmlx components.
docs.dhtmlx.com/doku.php?id=dhtm … gprinciple

Please use this package, we’ve attached updated dhtmlx connectors and mysql dump with reqired database tables. Sql dump and db connection settings can be found at samples/common/
s3.amazonaws.com/uploads.hipcha … 130807.zip

Example for loading/saving data:

Thanks for the help. It was useful.

gantt.attachEvent(“onBeforeTaskChanged”, function(id, mode, old_event){
var task = gantt.getTask(id);
if(mode == gantt.config.drag_mode.progress){
if(task.progress < old_event.progress){
dhtmlx.message(task.text + " progress can’t be undone!");
return false;
return true;


I want to use similar method to access the parent id and other information about the parent. Is it possible? How?

I forgot to mention.
I want the above when adding a new task.
I want to access the parent id, new task name.

And the same when adding connectors. I want the ids of the two tasks and the type of connector in the validation.

Sorry. Having to post multiple posts because not able to edit a single post.

Task object holds some service properties(all properties that starts with $ character). Id of the parent node is stored in task.$parent
You can retreive parent task following way

if(!task.$parent){ //has no parent task }else{ var parent = gantt.getTask(task.$parent); }

Ok. Thanks.

I want to run a javascript function on my page on save of the light box where I want to do some calculations and accordingly allow user to use or not save. How should I do that?

Is it possible to get a hold of a preliminary copy of the documentation?

Hi -

Will it be possible to have the “Parent” be somehow automatically rendered without having a specific record tied to it? Or at least have the start and end date change on the parent when the children start and end are adjusted.

My goal is to have the tasks come from the database, grouped by project. But the project duration would always just be a reflection of the duration of its children - not an adjustable task in its own right.



Hello sagnik,

gantt fires events on important user actions, they can be catched used in a similar way as events of dhtmlxScheduler.
You may check these articles in scheduler’s documentation to get the idea:
docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … event.html
docs.dhtmlx.com/scheduler/api__s … event.html

You can attach custom function on event following way:[code]gantt.attachEvent(“onBeforeLightbox”, function(task_id){
//do something

//return true to continue default behavior, returning false value will prevent lightbox from showing
return true;

});[/code]Posted version of gantt throws following lightbox-related events:
“onBeforeLightbox” - after user double-clicks on task(on opening lightbox in any other way), but before showing lightox
“onLightbox” - triggers when ligthbox is initialized and shown
“onLightboxCancel” - when user presses ‘cancel’ button
“onAfterLightbox” - after lightbox is closed

However, seems like it misses ‘onLightboxSave’ event, which should have allow validating and preventing saving, trigger for ‘delete’ button is also missing. We’ll add it and update the beta in the nearest time.

documentation is being actively edited, so we can’t provide it for now

Hi kdoronzio,
it’s a planned feature, although currently it’s not implemented.
Technically you can achieve it’s right now by updating duration of the parent each time one of it’s child is updated.
Modifying of the task can be catched following way://task modified gantt.attachEvent("onAfterUpdate", function(id, task){ //update parent here }); //new task added gantt.attachEvent("onAfterAdd", function(id, task){ //update parent here });

Is it possible to not display certain tasks from the array?

{“id”:1, “text”:“Project #2”, “start_date”:“01-04-2013”, “duration”:“18”, “order”:“10”, progress: 0.4,“parent”:"", open: true},

	{"id":2, "text":"Task #1", "start_date":"02-04-2013", "duration":"8", "order":"10", progress: 0.6, "parent":"1", open: true},
	{"id":3, "text":"Task #2", "start_date":"11-04-2013", "duration":"8", "order":"20", "parent":"1", progress: 0.6, open: true},
	{"id":4, "text":"Task #3", "start_date":"13-04-2013", "duration":"6", "order":"30", "parent":"1", progress: 0.5, open: true}

Is is possible to display only the first and third and not the 2nd and 4th without removing it from the array?

Also, I need a method to access the link values after adding the link.

“onLinkValidation” seems to access the values before the link is added.

Also, is it possible to delete a link and what method should I use for that?

How do I edit or delete the links on the chart? Clicking or dragging on the link does not work.
are the existing methods. onAfterLinkUpdate,onAfterLinkDelete - when will these two get called?
The Link sample " 03_connector_init " is also not loading.