Gantt for Web Forms - Planned vs Actual Tasks

This example demonstrates how to display actual and planned tasks in the Gantt chart.

The main idea of this example is to create two div elements and add them to a task's container. The first div element displays planned tasks. The second div element is for actual tasks.

The data source with Gantt data contains four date fields. Two date fields (startDate, endDate) contain planned dates for a task. The other two are actual task dates.

public class Task
{
    //...
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public DateTime ActualStartDate { get; set; }
    public DateTime ActualEndDate { get; set; }
}

Handle the TaskShowing event to create two div elements and add them to a task's container (the e.container property).

<dx:ASPxGantt ID="Gantt" runat="server" ...>
    <ClientSideEvents TaskShowing="getTaskContentTemplate" />
    ...
</dx:ASPxGantt>

function getTaskContentTemplate(s, e) {
    var $parentContainer = $(document.createElement("div"));
    appendPlannedTask(e.item.taskData, e.item.taskResources[0], e.item.taskSize.width, $parentContainer);
    appendActualTask(e.item.taskData, e.item.taskSize.width, $parentContainer);
    $parentContainer.appendTo(e.container);
}

The first div element (planned task) uses the e.item.taskSize.width parameter as the element's width.

function appendPlannedTask(taskData, resource, taskWidth, container) {
    var $plannedTaskContainer = $(document.createElement("div"))
        .addClass("planned-task")
        .attr("style", "width:" + taskWidth + "px;")
        .appendTo(container);
    var $wrapper = $(document.createElement("div"))
        .addClass("planned-task-wrapper")
        .appendTo($plannedTaskContainer);
    $(document.createElement("div"))
        .addClass("planned-task-title")
        .text(taskData.Title)
        .appendTo($wrapper);
    $(document.createElement("div"))
        .addClass("planned-task-resource")
        .text(resource ? resource.text : "")
        .appendTo($wrapper);
    $(document.createElement("div"))
        .addClass("planned-task-progress")
        .attr("style", "width:" + (parseFloat(taskData.Progress)) + "%;")
        .appendTo($plannedTaskContainer);
}

The second div element (actual task) calculates its width and position based on the StartDate, EndDate, ActualStartDate, and ActualEndDate properties from the e.item.taskData object.

function appendActualTask(taskData, taskWidth, container) {
    var taskRange = taskData.EndDate - taskData.StartDate;
    var tickSize = taskWidth / taskRange;
    var actualTaskOffset = new Date(taskData.ActualStartDate) - taskData.StartDate;
    var actualTaskRange = new Date(taskData.ActualEndDate) - new Date(taskData.ActualStartDate);
    var actualTaskWidth = Math.round(actualTaskRange * tickSize) + "px";
    var actualTaskLeftPosition = Math.round(actualTaskOffset * tickSize) + "px";
    $(document.createElement("div"))
        .addClass("actual-task")
        .attr("style", "width:" + actualTaskWidth + "; left:" + actualTaskLeftPosition)
        .appendTo(container);
}

Files to look at:

• Default.aspx
• GanttDataProvider.cs
• GanttDataProvider.vb