JavaScript

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

Adding a single event (raw data)

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

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

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

Adding a single event (DayPilot.Event object)

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

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

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

Adding a single event (milestone)

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

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

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

Adding a task with children

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

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

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

Bulk loading

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

<script>
  var gantt = new DayPilot.Gantt("gantt");
  gantt.taskGroupMode = "Auto";   // task group start and end is calculated automatically (default value)
  gantt.tasks.list = [{
    id: "1234",
    text: "Group 1",
    children: [
      {
        id: "1234",
        start: "2014-10-01T00:00:00",
        end: "2014-10-02T00:00:00",
        text: "Task 1"
      },
      {
        id: "1234",
        start: "2014-10-02T00:00:00",
        text: "Task 1",
        type: "Milestone"
      }
    ]
  }];
  gantt.init();
</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"
          }
      );
  }            
}