Tutorial: ASP.NET MVC 5 Gantt Chart

Features

• Hierarchy of tasks
• Task groups
• Task dependencies
• Drag and drop support: task moving and resizing, reordering tasks in the hierarchy, link creating
• Adding a new task using a special row
• Custom columns with additional data (name, id, duration)
• Visual Studio 2013 solution
• SQL Server 2014 database
• ASP.NET MVC 5
• C# source code
• VB.NET source code

Source code of the tutorial is available for download.

Example - Loading Links (Gantt Task Dependencies)

This example shows how to load task links.

C#

public class GanttController : Controller
{

  public ActionResult Backend()
  {
      return new Gantt().CallBack(this);
  }

  class Gantt : DayPilotGantt
  {
      
      protected override void OnInit(InitArgs e)
      {
          StartDate = new DateTime(2014, 10, 1);
          Days = 60;

          LoadTasks();
          LoadLinks();

          UpdateWithMessage("Welcome!");
      }
      
      // ...

      private void LoadLinks()
      {
          LinksFromEnumerable(
              Db.GetLinks().Rows,
              new LinkFieldMappings()
              {
                  IdField = "id",
                  FromField = "from",
                  ToField = "to",
                  TypeField = "type"
              });
      }
  }
}

VB

Public Class GanttController
  Inherits Controller

  Public Function Backend() As ActionResult
      Return (New Gantt()).CallBack(Me)
  End Function

  Private Class Gantt
      Inherits DayPilotGantt

      Protected Overrides Sub OnInit(ByVal e As InitArgs)
          StartDate = New Date(2014, 10, 1)
          Days = 60
          
          LoadTasks()
          LoadLinks()
          
          UpdateWithMessage("Welcome!")
      End Sub

      Private Sub LoadLinks()
          LinksFromEnumerable(Db.GetLinks().Rows, New LinkFieldMappings() With {
            .IdField = "id", 
            .FromField = "from", 
            .ToField = "to", 
            .TypeField = "type"})
      End Sub

  End Class

End Class