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: "2024-10-01T00:00:00",
        end: "2024-10-02T00:00:00",
        text: "Task 1"
      },
      {
        id: 3,
        start: "2024-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: "2024-10-01T00:00:00",
    end: "2024-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: "2024-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: "2024-10-01T00:00:00",
        end: "2024-10-02T00:00:00",
        text: "Task 1"
      },
      {
        id: 9,
        start: "2024-10-02T00:00:00",
        text: "Task 1",
        type: "Milestone"
      }
    ]
  });
</script>

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"
          }
      );
  }            
}