ASP.NET Gantt Chart

asp.net-gantt-chart.png

DayPilot Pro includes an ASP.NET Gantt Chart control. It displays a timeline for a hierarchy of tasks.

See Also

Example

<DayPilot:DayPilotGantt
  ID="DayPilotGantt1" 
  runat="server" 
  >
  <Columns>
      <DayPilot:TaskColumn Title="Name" Property="text" Width="100" />
      <DayPilot:TaskColumn Title="Info" Property="info" Width="100" />
  </Columns>
</DayPilot:DayPilotGantt>

For a sample ASP.NET web project that demonstrates how to display a Gantt chart using an SQL database, see the Gantt Chart Tutorial [code.daypilot.org]. The download includes both C# and VB.NET versions.

Demo

Tutorial

Drag and Drop

asp.net-gantt-drag-and-drop.png

DayPilot ASP.NET Gantt Chart supports the following drag and drop operations:

  • moving tasks and milestones in time
  • resizing tasks
  • task tree drag and drop
  • creating dependencies (links) using drag and drop

Read more about Gantt drag and drop support.

Progress Bar (Percent Complete)

gantt-chart-asp.net-percent-complete.png

In order to use the duration bar to display task progress, use DurationBarMode="PercentComplete" and set the value in BeforeEventRender event.

Example

protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
  int complete = (int) e.DataItem["complete"]; // use "complete" field of your DataSource items  
  e.PercentComplete = complete;  
string cs = String.Format("{0}%", complete); // override the task text e.InnerHTML = cs; }

Full CSS Styling

All elements can be styled using pure CSS.

Export as Image (PNG, GIF, JPG)

gantt-chart-asp.net-png-export.png

The Gantt chart can be exported as image.

  • Formats: PNG, JPG, GIF, BMP, TIFF (MemoryStream class)
  • Raw Bitmap class (you can further modify the image or merge it with other images)
  • Add images to PDF files, e-mails, or display static snapshots of the gantt chart

CSS Themes

Examples of available themes:

Green Theme

gantt-chart-asp.net-theme-green.png

White Theme

gantt-chart-asp.net-theme-white.png

Transparent Theme

gantt-chart-asp.net-theme-transparent.png

CSS Theme Designer

gantt-chart-asp.net-theme-designer.png

Create your own CSS theme in the online theme designer application.

Active Areas

You can define custom active areas inside the task box that will be permanently visible or that will be displayed on hover

An active area can have an action associated to it:

  • context menu
  • drag handler for moving
  • drag handler for resizing
  • custom JavaScript action
protected void DayPilotScheduler1_BeforeEventRender(object sender, BeforeEventRenderEventArgs e)
{
    e.Areas.Add(new Area().Width(17).Bottom(9).Right(19).Top(3).CssClass("event_action_delete").JavaScript("dps1.commandCallBack('delete', {id:e.value() });"));
    e.Areas.Add(new Area().Width(17).Bottom(9).Right(2).Top(3).CssClass("event_action_menu").ContextMenu("cmSpecial"));
}

Event delete icon example

gantt-chart-asp.net-area-delete.png

Event context menu example

gantt-chart-asp.net-area-context-menu.png

Task Details

gantt-chart-asp.net-task-detail.png

One of the ways to display the event details is DayPilot Bubble - an extended HTML tooltip that is displayed on hover.

DayPilot for JavaScript, ASP.NET WebForms, ASP.NET MVC, Java