Tutorial: ASP.NET Gantt Chart Control

This ASP.NET tutorial shows how to create a simple project management application using the ASP.NET Gantt chart control. Includes sample C# and VB.NET projects with source code.
Oct 21, 2014
asp.net gantt project management

Features

  • ASP.NET Gantt Chart control
  • Drag and drop (task moving, resizing, link creating, row moving)
  • Dependencies (task links)
  • Task groups
  • Milestones
  • Task duration in a special column
  • Context menu for task creating and deleting
  • Visual Studio sample solution
  • C# source code
  • VB.NET source code
  • Visual Studio 2012 solution

Source code of the tutorial is available for download.

Example - Drag and Drop Row Moving

asp.net-gantt-drag-and-drop-row-moving-target.png

This example shows how to use the row drag and drop moving feature.

ASPX

<DayPilot:DayPilotGantt
    runat="server" 
    ID="Gantt"
    ...
    RowMoveHandling="Notify"
    />

C#

protected void Gantt_OnRowMove(object sender, RowMoveEventArgs e)
{
  const int max = Int32.MaxValue; // make sure it's greater than any other ordinal value

  Task sourceParent = Gantt.Tasks.FindParent(e.Source);
  Task targetParent = Gantt.Tasks.FindParent(e.Target);

  //DataRow sourceRow = DbGetTask(e.Source.Id);
  DataRow targetRow = Db.GetTask(e.Target.Id);

  string targetParentId = targetParent != null ? targetParent.Id : null;
  string sourceParentId = sourceParent != null ? sourceParent.Id : null;

  int targetOrdinal = (int) targetRow["ordinal"];

  switch (e.Position)
  {
      case RowMovePosition.Before:
          Db.UpdateTaskParent(e.Source.Id, targetParentId, targetOrdinal);
          break;
      case RowMovePosition.After:
          Db.UpdateTaskParent(e.Source.Id, targetParentId, targetOrdinal + 1);
          break;
      case RowMovePosition.Child:
          Db.UpdateTaskParent(e.Source.Id, e.Target.Id, max);
          targetParentId = e.Target.Id;
          break;
      case RowMovePosition.Forbidden:
          break;
      default:
          throw new ArgumentOutOfRangeException();
  }

  Db.CompactOrdinals(sourceParentId);
  if (sourceParentId != targetParentId)
  {
      Db.CompactOrdinals(targetParentId);
  }

}

VB

Protected Sub Gantt_OnRowMove(ByVal sender As Object, ByVal e As RowMoveEventArgs)
  Const max As Integer = Int32.MaxValue ' make sure it's greater than any other ordinal value

  Dim sourceParent As Task = Gantt.Tasks.FindParent(e.Source)
  Dim targetParent As Task = Gantt.Tasks.FindParent(e.Target)

  'DataRow sourceRow = DbGetTask(e.Source.Id);
  Dim targetRow As DataRow = Db.GetTask(e.Target.Id)

  Dim targetParentId As String = If(targetParent IsNot Nothing, targetParent.Id, Nothing)
  Dim sourceParentId As String = If(sourceParent IsNot Nothing, sourceParent.Id, Nothing)

  Dim targetOrdinal As Integer = DirectCast(targetRow("ordinal"), Integer)

  Select Case e.Position
    Case RowMovePosition.Before
      Db.UpdateTaskParent(e.Source.Id, targetParentId, targetOrdinal)
    Case RowMovePosition.After
      Db.UpdateTaskParent(e.Source.Id, targetParentId, targetOrdinal + 1)
    Case RowMovePosition.Child
      Db.UpdateTaskParent(e.Source.Id, e.Target.Id, max)
      targetParentId = e.Target.Id
    Case RowMovePosition.Forbidden
    Case Else
      Throw New ArgumentOutOfRangeException()
  End Select

  Db.CompactOrdinals(sourceParentId)
  If sourceParentId <> targetParentId Then
    Db.CompactOrdinals(targetParentId)
  End If

End Sub

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