DayPilot Gantt Chart for ASP.NET

• Download sample project (C#, VB) - 636 kB [codeproject.com]
• Download DayPilot [daypilot.org]
• Online demo [daypilot.org]

DayPilot Scheduler is a flexible open-source ASP.NET control for displaying events for multiple resources (Apache Software License 2.0).

Related article:  

• DayPilot Scheduler Control for ASP.NET [codeproject.com] 

With the new DayPilot 3.2 release it is possible to show a Gantt chart (ViewType="Gantt"). In the Gantt mode, a special row is created for each task from the DataSource.

This article shows how to display a Gantt chart using DayPilot Scheduler and handle basic task operations (creating, editing) using an AJAX modal dialog. The sample ASP.NET application stores task data in a SQL Server database. The Visual Studio solution includes source code in both C# and Visual Basic.

Features  

• Displays one task per row (a Gantt chart)
• Stores data in an SQL Server database (SQL Server 2008 Express or higher is required)
• Displays additional data (task duration) in custom columns
• Header columns can be resized using drag&drop
• Fast refresh using UpdatePanel
• Event creating and editing using a modal dialog

Gantt versus Resources Mode

In the Gantt view, a special row will be created for each event/task automatically.

Compare it with the Resources view of the Scheduler where the rows are defined manually using Resources property and multiple events can be assigned to the same resource.

Resources  

Gantt 

Loading Tasks to the Gantt Chart

Loading the the tasks is as simple as setting the DataSource and its fields (DataStartField, DataEndField, DataTextField, DataValueField) and ViewType.

Default.aspx 

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server"
  ViewType="Gantt" /> 

Default.aspx.cs 

protected void Page_Load(object sender, EventArgs e)
{
  if (!IsPostBack)
  {
    LoadEvents();
  }
}

private void LoadEvents()
{
  DayPilotScheduler1.DataStartField = "AssignmentStart";
  DayPilotScheduler1.DataEndField = "AssignmentEnd";
  DayPilotScheduler1.DataTextField = "AssignmentNote";
  DayPilotScheduler1.DataValueField = "AssignmentId";
  DayPilotScheduler1.DataSource = new DataManager().GetAssignments();
  DataBind();
}

DataManager is a helper class for data access. GetAssigments() methods loads the tasks:

 public DataTable GetAssignments()
{
  DataTable dt = new DataTable();
  var da = CreateDataAdapter("select * from [Assignment]");
  da.Fill(dt);
  return dt;
} 

Define Gantt Header Columns

You can customize the columns (Task, Duration) by modifying the HeaderColumns property.

Set Title and Width properties for each column you want to display.

Default.aspx 

<DayPilot:DayPilotScheduler 
  ID="DayPilotScheduler1" 
  runat="server" 
  ViewType="Gantt">
    <HeaderColumns>
      <DayPilot:RowHeaderColumn title="Task" Width="150" />
      <DayPilot:RowHeaderColumn title="Duration" Width="80" />
    </HeaderColumns>
</DayPilot:DayPilotScheduler>

Load Task Data to Columns

The row headers can be customized using BeforeResHeaderRender event handler. In the Gantt mode, this event is called once for every task.

You can adjust the HTML of the default column (e.InnerHTML) and additional custom columns (e.Columns collection).

protected void DayPilotScheduler1_BeforeResHeaderRender(object sender, BeforeHeaderRenderEventArgs e)
{
  DataItemWrapper task = e.DataItem;
  int duration = Convert.ToInt32(task["AssignmentDuration"]);

  e.Columns[0].InnerHTML = "<div style='text-align:right; padding: 0px 6px 0px 2px;'>" + duration + " days</div>";
}

Persist Custom Column Widths 

The header columns can be resized by dragging the separator line. As soon as the user finishes the resizing, HeaderColumnWidthChanged event is fired on the server side.

On page load, check for the saved colum widths:

 protected void Page_Load(object sender, EventArgs e)
{
  // ...

  string cols = new DataManager().GetUserConfig(User.Identity.Name, "project.cols");
  if (cols != null)
  {
    DayPilotScheduler1.RowHeaderColumnWidths = cols;
  }
}

Whenever the user changes the column width, save the new widths to the database.

 protected void DayPilotScheduler1_HeaderColumnWidthChanged(object sender, HeaderColumnWidthChangedEventArgs e)
{
  new DataManager().SetUserConfig(User.Identity.Name, "project.cols", DayPilotScheduler1.RowHeaderColumnWidths);
  LoadEvents();
}

Event Editing in a Modal Dialog

The "New Task" opens New.aspx page in a modal dialog using the DayPilot.Modal script.

<div><a href="javascript:create('<%# DateTime.Today.ToString("s") %>')">New Task</a></div>

<script type="text/javascript">
  function create(start) {
    createModal().showUrl('New.aspx?start=' + start);
  }

function createModal() {
  var modal = new DayPilot.Modal();
  modal.border = "10px solid #d0d0d0";
  modal.closed = function () {
    if (this.result && this.result.refresh) {
      __doPostBack(id.refreshButton, '');
    }
  };
  return modal;
}
</script>

New.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="New.aspx.cs" Inherits="Project_New" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>New</title>
  <link href="~/Media/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
  <div>
    <table border="0" cellspacing="4" cellpadding="0">
      <tr>
      <td align="right" valign="top"></td>
      <td><h1>New Task</h1></td>
      </tr>
      <tr>
      <td align="right">Start:</td>
      <td><asp:TextBox ID="TextBoxStart" runat="server"></asp:TextBox></td>
      </tr>
      <tr>
      <td align="right">Duration:</td>
      <td><asp:DropDownList ID="DropDownListDuration" runat="server">
      <asp:ListItem>1</asp:ListItem>
      <asp:ListItem>2</asp:ListItem>
      <asp:ListItem>3</asp:ListItem>
      <asp:ListItem>4</asp:ListItem>
      <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList>
      days</td>
      </tr>
      <tr>
      <td align="right">Description:</td>
      <td><asp:TextBox ID="TextBoxNote" runat="server"></asp:TextBox></td>
      </tr>
      <tr>
      <td align="right"></td>
      <td>
      <asp:Button ID="ButtonOK" runat="server" OnClick="ButtonOK_Click" Text="OK" />
      <asp:Button ID="ButtonCancel" runat="server" Text="Cancel" OnClick="ButtonCancel_Click" />
      </td>
      </tr>
    </table>
  </div>
  </form>

  <script type="text/javascript">
  document.getElementById("TextBoxNote").focus();
  </script>

</body>
</html> 

New.aspx.cs

public partial class Project_New : Page
{
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      DateTime start = Convert.ToDateTime(Request.QueryString["start"]);
      TextBoxStart.Text = start.ToShortDateString();
    }
  }

  protected void ButtonOK_Click(object sender, EventArgs e)
  {

    DateTime start = Convert.ToDateTime(TextBoxStart.Text);
    int duration = Convert.ToInt32(DropDownListDuration.SelectedValue);
    string note = TextBoxNote.Text;

    new DataManager().CreateAssignment(start, duration, note);

    // passed to the modal dialog close handler, see Scripts/App/gantt.js
    Hashtable ht = new Hashtable();
    ht["refresh"] = "yes";
    ht["message"] = "Event created.";

    Modal.Close(this, ht);
  }

  protected void ButtonCancel_Click(object sender, EventArgs e)
  {
    Modal.Close(this);
  }
}

See Also 

• DayPilot [daypilot.org] 
• Open-Source Gantt Chart for ASP.NET (C#, VB.NET) [code.daypilot.org]  
• Project Management for ASP.NET (Open-Source) [code.daypilot.org]
  A more complex example of using the Gantt chart in an ASP.NET application.