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