html5 gantt chart task creating

You can add new tasks to the Gantt chart using the built-in new task row.

This feature is disabled by default. You can to enable it using rowCreateHandling property.

html5 gantt chart new task

When this feature is enabled there will be a special row added to the bottom. The row header becomes editable on click. When the user finishes editing (enter or lost focus), onRowCreate event is fired. Pressing escape during editing cancels the action.

JavaScript Gantt Chart

Example

gantt.rowCreateHandling = "Enabled";
gantt.onRowCreate = function(args) {
  dp.tasks.add({
      id: DayPilot.guid(),
      text: args.text,
      start: new DayPilot.Date().getDatePart(),
      end: new DayPilot.Date().getDatePart().addDays(1)
  });
};

Demo