Click here to Skip to main content
Click here to Skip to main content

DayPilot Gantt Chart for ASP.NET

, 3 Apr 2014
Rate this:
Please Sign up or sign in to vote.
How to display AJAX Gantt Chart in ASP.NET application.

Open-Source Gantt Chart for ASP.NET

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

Related article:

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

DayPilot Scheduler - Resources View

Gantt

DayPilot Scheduler - Gantt View

Behavior ViewType="Gantt" ViewType="Resources"
Rows Generated automatically, one row per event Defined manually using Resources collection
Multiple concurrent events in a row Not allowed Allowed
Row customization (BeforeResHeaderRender event) Yes Yes
Event customization (BeforeEventRender event) Yes Yes
Custom row header columns Yes Yes
DataResourceField required No Yes

Loading Tasks to the Gantt Chart

Open-Source Gantt for ASP.NET Tasks

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

Open-Source Gantt for ASP.NET 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

Open-Source Gantt Chart for ASP.NET Task Data

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 Column Widths

Open-Source Gantt for ASP.NET Resizing

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

DayPilot Gantt New Task 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);
  }
}

History

  • April 3, 2014 - Duration of "1 days" fixed to "1 day"
  • April 2, 2014 - Visual Studio 2012 solution updated with DayPilot Lite 4.1
  • November 13, 2013 - Updated version for Visual Studio 2012, LocalDB, DayPilot Lite 4.0, Windows 8 CSS THeme

See Also

License

This article, along with any associated source code and files, is licensed under The Apache License, Version 2.0

Share

About the Author

Dan Letecky

Czech Republic Czech Republic
My open-source event calendar/scheduling AJAX controls:
 
DayPilot for JavaScript/HTML5/jQuery
DayPilot for ASP.NET
DayPilot for MVC
DayPilot for Java

Comments and Discussions

 
QuestionNice PinmemberPawanShukla7-Apr-14 1:33 
AnswerRe: Nice PinpremiumDan Letecky7-Apr-14 8:40 
Question5 PinprofessionalJB03012-Apr-14 17:27 
AnswerRe: 5 PinpremiumDan Letecky3-Apr-14 0:02 
GeneralMy vote of 5 PinmemberSummerDreamer25-Apr-13 17:52 
GeneralRe: My vote of 5 PinmemberDan Letecky25-Apr-13 19:48 
GeneralMy vote of 5 PinmemberBoipelo14-Feb-13 5:28 
GeneralRe: My vote of 5 PinmemberDan Letecky14-Feb-13 5:35 
GeneralMy vote of 5 PinmemberAnshul Mehra12-Feb-13 16:54 
GeneralRe: My vote of 5 PinmemberDan Letecky12-Feb-13 20:22 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140821.2 | Last Updated 3 Apr 2014
Article Copyright 2013 by Dan Letecky
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid