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);
}
(you will be redirected to DevExpress.com to submit your response)