Tutorial: ASP.NET MVC 5 Gantt Chart

This tutorial shows how to create a ASP.NET MVC 5 project management application using DayPilot MVC Gantt Chart control.
Nov 30, 2014
asp.net mvc gantt chart control

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)

asp.net-mvc-gantt-chart-loading-links.png

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

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java