Click here to Skip to main content
15,440,179 members
Articles / Web Development / HTML
Posted 7 Feb 2013


62 bookmarked

DayPilot Gantt Chart for ASP.NET

Rate me:
Please Sign up or sign in to vote.
4.85/5 (21 votes)
21 Mar 2016Apache3 min read
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.


  • 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.


DayPilot Scheduler - Resources View


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.


  ViewType="Gantt" />  


protected void Page_Load(object sender, EventArgs e)
  if (!IsPostBack)

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

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]");
  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.


      <DayPilot:RowHeaderColumn title="Task" Width="150" />
      <DayPilot:RowHeaderColumn title="Duration" Width="80" />

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);

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;


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

  <script type="text/javascript">



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)


  • March 21, 2016 - Visual Studio 2015 solution added (SQL Server 2014, DayPilot Lite 5.0 SP2, DayPilot Modal 2.4, HTML5 doctype)
  • May 15, 2015 - Visual Studio 2013 solution added (SQL Server 2014, DayPilot Lite 5.0)
  • 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


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

Written By
Czech Republic Czech Republic
My open-source event calendar/scheduling web UI components:

DayPilot for JavaScript, Angular, React and Vue
DayPilot for ASP.NET

Comments and Discussions

QuestionHow to add the Another? Pin
Member 1188979916-Feb-16 19:54
professionalMember 1188979916-Feb-16 19:54 
QuestionScheduler for Audit Team Pin
Member 1207219019-Oct-15 21:36
MemberMember 1207219019-Oct-15 21:36 
QuestionNice Pin
PawanShukla7-Apr-14 1:33
MemberPawanShukla7-Apr-14 1:33 
AnswerRe: Nice Pin
Dan Letecky7-Apr-14 8:40
MemberDan Letecky7-Apr-14 8:40 
Question5 Pin
JB03012-Apr-14 17:27
professionalJB03012-Apr-14 17:27 
AnswerRe: 5 Pin
Dan Letecky3-Apr-14 0:02
MemberDan Letecky3-Apr-14 0:02 
GeneralMy vote of 5 Pin
SummerDreamer25-Apr-13 17:52
MemberSummerDreamer25-Apr-13 17:52 
GeneralRe: My vote of 5 Pin
Dan Letecky25-Apr-13 19:48
MemberDan Letecky25-Apr-13 19:48 
GeneralMy vote of 5 Pin
Boipelo14-Feb-13 5:28
MemberBoipelo14-Feb-13 5:28 
GeneralRe: My vote of 5 Pin
Dan Letecky14-Feb-13 5:35
MemberDan Letecky14-Feb-13 5:35 
GeneralMy vote of 5 Pin
Anshul Mehra12-Feb-13 16:54
professionalAnshul Mehra12-Feb-13 16:54 
GeneralRe: My vote of 5 Pin
Dan Letecky12-Feb-13 20:22
MemberDan Letecky12-Feb-13 20:22 

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

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