html5 gantt chart task versions

The Gantt chart can display multiple versions of a task bar in each row.

  • Task versions need to be enabled using TaskVersionsEnabled property.
  • The task versions will be displayed above the main bar.
  • A special CSS class will be applied to task versions (*_event_version, e.g. gantt_default_event_version for the default CSS theme).
  • Drag and drop operations (moving, resizing) are not allowed for task versions.

JavaScript

Example

<div id="dp"></div>

<script>
  var dp = new DayPilot.Gantt("dp");
  // ...
  dp.taskVersionsEnabled = true;   
  dp.tasks = [    {
      start: "2016-12-01T00:00:00",
      end: "2016-12-03T00:00:00",
      id: 1,
      text: "Task 1",
      versions: [
          {
              start: "2016-12-02T00:00:00",
              end: "2016-12-04T00:00:00",
              text: "Version 1",
              complete: 40
          },
          {
              start: "2016-12-02T00:00:00",
              end: "2016-12-04T00:00:00",
              text: "Version 2",
              complete: 50
          }
      ],
      complete: 50
    }
  ];
  dp.init();
</script>

ASP.NET WebForms

Demo:

TaskVersions.aspx

<DayPilot:DayPilotGantt
    ID="DayPilotGantt1" 
    runat="server" 
    // ...
    TaskVersionsEnabled="true"
    >
</DayPilot:DayPilotGantt>

TaskVersions.aspx.cs (code behind)

using System;
using System.Collections;
using DayPilot.Web.Ui;
using DayPilot.Web.Ui.Enums.Gantt;
using DayPilot.Web.Ui.Events.Gantt;

public partial class Gantt_TaskVersions : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
    
        // ...

        if (!IsPostBack)
        {
            DayPilotGantt1.StartDate = DateTime.Today.AddDays(-1);
            DayPilotGantt1.Days = 30;
            LoadTasksAndLinks();
        }
    }

    private void LoadTasksAndLinks()
    {
        DayPilotGantt1.Tasks.Clear();
        DayPilotGantt1.Links.Clear();

        DateTime start = DateTime.Today.AddDays(1);

        Task group1 = new Task("Group 1", "G1", start, start.AddDays(1));
        group1.Tags["info"] = "info";
        group1.Complete = 30;
        group1.Children.Add(CreateTaskWithVersion("Task 1", "1", start.AddDays(1), start.AddDays(3), 50));
        group1.Children.Add("Task 2", "2", start.AddDays(-5), start.AddDays(1));
        group1.Children.Add(new Milestone("Milestone 1", "M1", start.AddDays(2)));
        DayPilotGantt1.Tasks.Add(group1);
        DayPilotGantt1.Links.Add("2", "1");

        start = start.AddDays(2);
        Task group2 = new Task("Group 2", "G2", start, start.AddDays(1));
        group2.Tags["info"] = "info";
        group2.Complete = 30;
        group2.Children.Add(CreateTaskWithVersion("Task 1", "3", start, start.AddDays(4), 50));
        group2.Children.Add("Task 2", "4", start.AddDays(1), start.AddDays(3));
        group2.Children.Add(new Milestone("Milestone 2", "M2", start.AddDays(2)));
        DayPilotGantt1.Tasks.Add(group2);
        DayPilotGantt1.Links.Add("3", "4");

        DayPilotGantt1.Links.Add("G1", "G2");

    }

    private Task CreateTaskWithVersion(string text, string id, DateTime start, DateTime end, int complete)
    {
        Task task = new Task(text, id, start, end);
        task.Complete = complete;

        TaskVersion version1 = new TaskVersion();
        version1.Start = start.AddDays(30);
        version1.End = end.AddDays(31);
        version1.Complete = complete - 20;
        task.Versions.Add(version1);

        TaskVersion version2 = new TaskVersion();
        version2.Start = start.AddDays(-1);
        version2.End = end.AddDays(-1);
        version2.Complete = complete - 10;
        task.Versions.Add(version2);

        return task;
    }


}