Skip to content

Latest commit

 

History

History
85 lines (71 loc) · 5.09 KB

README.md

File metadata and controls

85 lines (71 loc) · 5.09 KB
Raw

Gantt for ASP.NET Web Forms - Planned vs actual tasks

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

The Gantt data source contains four date fields: two of them contain planned dates for a task and the other two are filled based on real dates of each task.

The client-side TaskShowing event is used to display two visual elements for one task.

<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 main idea is to create two HTML div elements and add them to a task container. The first element represents planned tasks. It is created based on the taskSize parameter. The taskSize parameter comes from the e.item.taskSize.width property of the TaskShowing event.

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 element is for an actual task. Its size and position are calculated based on task data. The task data contains the StartDate, EndDate, ActualStartDate, and ActualEndDate that are used to calculate the position of the actual task. The task data comes from the e.item.taskData property of the TaskShowing event.

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 Review

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)