Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
DevExtreme.MVC.Demos.Models.SampleData
DevExtreme.MVC.Demos.Models.Gantt
<div class="options">
<div class="caption">Options</div>
<div class="column">
<div class="option">
<div class="label">Scale Type:</div>
<div class="value">
Html.DevExtreme().SelectBox() (
.ID("scaleType")
.InputAttr("aria-label", "Scale Type")
.DataSource(d => d.Array().Data(SampleData.GanttScaleTypes))
.Value("months")
.OnValueChanged("ganttScaleType_valueChanged")
)
</div>
</div>
<div class="option">
<div class="label">Title Position:</div>
<div class="value">
Html.DevExtreme().SelectBox() (
.ID("titlePosition")
.InputAttr("aria-label", "Title Position")
.DataSource(new[] {
"inside",
"outside",
"none"
})
.Value("outside")
.OnValueChanged("ganttTitlePosition_valueChanged")
)
</div>
</div>
<div class="option">
<div class="label">Show Resources:</div>
<div class="value">
Html.DevExtreme().CheckBox() (
.Value(true)
.OnValueChanged("ganttShowResources_changed")
)
</div>
</div>
<div class="option">
<div class="label">Show Dependencies:</div>
<div class="value">
Html.DevExtreme().CheckBox() (
.Value(true)
.OnValueChanged("ganttShowDependencies_changed")
)
</div>
</div>
</div>
<div class="column">
<div class="option">
<div class="label">Start Date Range:</div>
<div class="value">
Html.DevExtreme().DateBox() (
.InputAttr("aria-label", "Start Date")
.Type(DateBoxType.Date)
.Value(new DateTime(2018, 12, 1))
.OnValueChanged("ganttStartDateRange_changed")
)
</div>
</div>
<div class="option">
<div class="label">End Date Range:</div>
<div class="value">
Html.DevExtreme().DateBox() (
.InputAttr("aria-label", "End Date")
.Type(DateBoxType.Date)
.Value(new DateTime(2019, 12, 1))
.OnValueChanged("ganttEndDateRange_changed")
)
</div>
</div>
<div class="option">
<div class="label">Customize Task Tooltip:</div>
<div class="value">
Html.DevExtreme().CheckBox() (
.Value(true)
.OnValueChanged("ganttShowCustomTaskTooltip_changed")
)
</div>
</div>
</div>
</div>
Html.DevExtreme().Gantt<Task>() (
.ID("gantt")
.TaskTitlePosition(GanttTaskTitlePosition.Outside)
.ScaleType(GanttScaleType.Months)
.StartDateRange(new DateTime(2018, 12, 1))
.EndDateRange(new DateTime(2019, 12, 1))
.Tasks(t => t
.DataSource(ds => ds.Array().Data(SampleData.GanttTasks).Key("ID"))
.KeyExpr("ID")
.TitleExpr("Title")
.ParentIdExpr("ParentId")
.StartExpr("Start")
.EndExpr("End")
.ProgressExpr("Progress")
)
.Dependencies(d => d
.DataSource(ds => ds.Array().Data(SampleData.GanttDependencies).Key("ID"))
.KeyExpr("ID")
.PredecessorIdExpr("PredecessorId")
.SuccessorIdExpr("SuccessorId")
.TypeExpr("Type")
)
.Resources(r => r
.DataSource(ds => ds.Array().Data(SampleData.GanttResources).Key("ID"))
.KeyExpr("ID")
.TextExpr("Text")
)
.ResourceAssignments(ra => ra
.DataSource(ds => ds.Array().Data(SampleData.GanttResourceAssignments).Key("ID"))
.KeyExpr("ID")
.TaskIdExpr("TaskId")
.ResourceIdExpr("ResourceId")
)
.Editing(e => e.Enabled(true))
.Columns(columns => {
columns.AddFor(m => m.Title)
.Caption("Subject")
.Width(300);
columns.AddFor(m => m.Start)
.Caption("Start Date");
columns.AddFor(m => m.End)
.Caption("End Date");
})
.TaskListWidth(500)
.TaskTooltipContentTemplate(new JS("getTaskTooltipContentTemplate"))
.TaskTimeTooltipContentTemplate(new JS("getTaskTimeTooltipContentTemplate"))
.TaskProgressTooltipContentTemplate(new JS("getTaskProgressTooltipContentTemplate"))
)
<script>
function getTaskTooltipContentTemplate(task, container) {
var timeEstimate = Math.abs(task.Start - task.End) / 36e5;
var timeLeft = Math.floor((100 - task.Progress) / 100 * timeEstimate);
var $customTooltip = $(document.createElement("div"))
.addClass("custom-task-edit-tooltip");
$(document.createElement("div"))
.addClass("custom-tooltip-title")
.text(task.Title)
.appendTo($customTooltip);
$(document.createElement("div"))
.addClass("custom-tooltip-row")
.text("Estimate: " + timeEstimate + " hours")
.appendTo($customTooltip);
$(document.createElement("div"))
.addClass("custom-tooltip-row")
.text("Left: " + timeLeft + " hours")
.appendTo($customTooltip);
return $customTooltip;
}
function getTaskTimeTooltipContentTemplate(task, container) {
var start = task.start.toLocaleString();
var end = task.end.toLocaleString();
var $customTooltip = $(document.createElement("div"))
.addClass("custom-task-edit-tooltip");
$(document.createElement("div"))
.addClass("custom-tooltip-title")
.text("Start: " + start)
.appendTo($customTooltip);
$(document.createElement("div"))
.addClass("custom-tooltip-title")
.text("End: " + end)
.appendTo($customTooltip);
return $customTooltip;
}
function getTaskProgressTooltipContentTemplate(task, container) {
var $customTooltip = $(document.createElement("div"))
.addClass("custom-task-edit-tooltip");
$(document.createElement("div"))
.addClass("custom-tooltip-title")
.text(task.progress + "%")
.appendTo($customTooltip);
return $customTooltip;
}
function getGanttInstance() {
return $("#gantt").dxGantt("instance");
}
function ganttScaleType_valueChanged(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("scaleType", e.value);
}
function ganttTitlePosition_valueChanged(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("taskTitlePosition", e.value);
}
function ganttShowResources_changed(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("showResources", e.value);
}
function ganttShowDependencies_changed(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("showDependencies", e.value);
}
function ganttShowCustomTaskTooltip_changed(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("taskTooltipContentTemplate", e.value ? getTaskTooltipContentTemplate : undefined);
ganttInstance.option("taskTimeTooltipContentTemplate", e.value ? getTaskTimeTooltipContentTemplate : undefined);
ganttInstance.option("taskProgressTooltipContentTemplate", e.value ? getTaskProgressTooltipContentTemplate : undefined);
}
function ganttStartDateRange_changed(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("startDateRange", e.value);
}
function ganttEndDateRange_changed(e) {
var ganttInstance = getGanttInstance();
ganttInstance.option("endDateRange", e.value);
}
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx