Task Loading

JavaScript

Task task object structure is described in DayPilot.Task.data property documentation.

Loading a new task set:

<div id="gantt"></div>

<script>
  const gantt = new DayPilot.Gantt("gantt");
  gantt.taskGroupMode = "Auto";   // task group start and end is calculated automatically (default value)
  gantt.init();

  // load data
  const tasks = [{
    id: 1,
    text: "Group 1",
    children: [
      {
        id: 2,
        start: "2027-10-01T00:00:00",
        end: "2027-10-02T00:00:00",
        text: "Task 1"
      },
      {
        id: 3,
        start: "2027-10-02T00:00:00",
        text: "Task 1",
        type: "Milestone"
      }
    ]
  }];
  gantt.update({tasks});

</script>

Adding a single event (raw data):

<div id="gantt"></div>

<script>
  const gantt = new DayPilot.Gantt("gantt");
  gantt.init();

  gantt.tasks.add({
    id: 5,
    start: "2027-10-01T00:00:00",
    end: "2027-10-02T00:00:00",
    text: "Task 1"
  });
</script>

Adding a single event (milestone):

<div id="gantt"></div>

<script>
  const gantt = new DayPilot.Gantt("gantt");
  gantt.init();

  gantt.tasks.add({
    id: 6,
    start: "2027-10-01T00:00:00",
    text: "Task 1",
    type: "Milestone"
  });
</script>

Adding a task with children:

<div id="gantt"></div>

<script>
  const gantt = new DayPilot.Gantt("gantt");
  gantt.taskGroupMode = "Auto";   // task group start and end is calculated automatically (default value)
  gantt.init();

  gantt.tasks.add({
    id: 7,
    text: "Group 1",
    children: [
      {
        id: 8,
        start: "2027-10-01T00:00:00",
        end: "2027-10-02T00:00:00",
        text: "Task 1"
      },
      {
        id: 9,
        start: "2027-10-02T00:00:00",
        text: "Task 1",
        type: "Milestone"
      }
    ]
  });
</script>

Load Tasks from a URL

Use gantt.tasks.load(url, success, error) to load a JSON task array and update the chart. Task groups use nested children arrays as in the examples above.

Invalid Loading Responses

In Pro since version 2026.4.7086, collection loading methods reject empty response bodies, malformed JSON and JSON values that are not arrays. Return [] when the collection is empty.

Supply an error callback to handle these failures. Its args.request is the original XMLHttpRequest; args.exception provides a parsing or validation exception when applicable. The success callback is not called and the existing collection is retained.

gantt.tasks.load("/api/tasks", null, args => {
  console.error("Loading failed", args.request.status, args.exception);
});

ASP.NET WebForms

The Gantt ASP.NET control supports two ways of loading data:

Generic ASP.NET-compatible data binding (DataSource and DataBind())
Direct loading using Tasks collection

ASP.NET Gantt Data Binding

Data source fields have to be mapped using Data*Field properties.

Required properties:

DataIdField
DataTextField
DataStartField
DataEndField

Optional properties:

DataParentField
DataMilestoneField
DataTagFields

Example

private void LoadTasks()
{
  DayPilotGantt1.DataSource = DataGeneratorGantt.GetData();
  DayPilotGantt1.DataIdField = "id";
  DayPilotGantt1.DataTextField = "text";
  DayPilotGantt1.DataStartField = "start";
  DayPilotGantt1.DataEndField = "end";
  DayPilotGantt1.DataParentField = "parent";
  DayPilotGantt1.DataMilestoneField = "milestone";
  DayPilotGantt1.DataBind();

  DayPilotGantt1.Links.Clear();
  DayPilotGantt1.Links.Add("1", "2");
}

Direct Gantt Task Data Loading

The tasks can be loaded by manually filling the Tasks collection.

Example

private void LoadTasks()
{
  DayPilotGantt1.Tasks.Clear();

  Task group = new Task("Group 1", "G1", DateTime.Now, DateTime.Now.AddDays(1));
  group.Tags["info"] = "info";
  group.Complete = 30;
  group.BubbleHtml = "Testing bubble";

  group.Children.Add(CreateTask("Task 1", "1", DateTime.Now, DateTime.Now.AddDays(1), 50));
  group.Children.Add("Task 2", "2", DateTime.Now, DateTime.Now.AddDays(1));
  group.Children.Add(new Milestone("Milestone 1", "M1", DateTime.Now.AddHours(1)));

  DayPilotGantt1.Tasks.Add(group);
}

ASP.NET MVC

Direct Task Loading

You can load tasks by adding Task objects to the Tasks collection. Add task children to Task.Children.

private void LoadTasks()
{
    Task group = Tasks.AddGroup("Group 1", "G1");
    group.Children.Add(NewTask("Task 1", "1", DateTime.Today, DateTime.Today.AddDays(2)));
    group.Children.Add(NewTask("Task 2", "2", DateTime.Today, DateTime.Today.AddDays(2)));
    group.Children.AddMilestone("Milestone 1", "3", DateTime.Today.AddDays(2));
}

Loading from a Flat Data Source

You can load tasks from an Enumerable of custom objects using TasksFromEnumerable() method.

It accepts two parameters:

data source (Enumerable)
field mapping class (TaskFieldMappings)

This method will create the Tasks hierarchy from a flat datasource (typically loaded from a database).

You need to map the Enumerable object properties to the Gantt properties using TaskFieldMappings class.

TextField - field with Gantt task name
IdField - field with task id
StartField - field with task start (DateTime)
EndField - field with task end (DateTime)
ParentField - field with parent task id (null for the root tasks)
MilestoneField - field that holds true for milestones
TagFields - a comma-separated list of custom fields (use them for automatic column data loading, task and row customization, etc.)

class Gantt : DayPilotGantt
{
  protected override void OnInit(InitArgs e)
  {
    // ...
    LoadTasks();
    UpdateWithMessage("Welcome!");
  }

  private void LoadTasks()
  {

      TasksFromEnumerable(
          Db.GetTasksFlat().Rows,
          new TaskFieldMappings()
          {
              TextField = "name",
              IdField = "id",
              StartField = "start",
              EndField = "end",
              ParentField = "parent_id"
          }
      );
  }            
}

Availability

Availability of this feature in DayPilot editions:

Product	Lite	Pro
DayPilot for JavaScript
DayPilot for ASP.NET WebForms
DayPilot for ASP.NET MVC
DayPilot for Java