Click here to Skip to main content
16,020,666 members
Articles / Web Development / HTML

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 101.5K   4.2K   62   12
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

  • 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

License

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

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
Member 1207219019-Oct-15 21:36 
QuestionNice Pin
PawanShukla7-Apr-14 1:33
PawanShukla7-Apr-14 1:33 
AnswerRe: Nice Pin
Dan Letecky7-Apr-14 8:40
Dan 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
Dan Letecky3-Apr-14 0:02 
GeneralMy vote of 5 Pin
SummerDreamer25-Apr-13 17:52
SummerDreamer25-Apr-13 17:52 
GeneralRe: My vote of 5 Pin
Dan Letecky25-Apr-13 19:48
Dan Letecky25-Apr-13 19:48 
GeneralMy vote of 5 Pin
Boipelo14-Feb-13 5:28
Boipelo14-Feb-13 5:28 
Excellent
GeneralRe: My vote of 5 Pin
Dan Letecky14-Feb-13 5:35
Dan 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
Dan 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.