windowsforms-403386-controls-and-libraries-gantt-control-html-templates-in-gantt-control.md
This topic explains how to use HTML/CSS templates to customize the appearance of Gantt Control elements. For more information about web templates in DevExpress WinForms applications, see this documentation article: HTML-CSS-based Desktop UI.
Run Demo: HTML in Gantt Control Run Demo: Interactive HTML Elements
Gantt Control supports HTML/CSS templates for the following UI elements:
Click the ellipsis button next to the GanttControl.HtmlTemplates property in the Visual Studio Property Grid, and enter the HTML markup with CSS styles in corresponding panels. The built-in syntax editor highlights keywords and unknown tags.
Populate the GanttControl.HtmlTemplates collection with the DevExpress.Utils.Html.HtmlTemplate class instances.
var TaskProgressTemplate = new DevExpress.Utils.Html.HtmlTemplate();
TaskProgressTemplate.Name = "TaskProgressTemplate";
TaskProgressTemplate.Template = "<div class=\"task-progress\"></div>";
TaskProgressTemplate.Styles = ".task-progress {\r\n\tdisplay: flex;\r\n\tmargin-top: 40px;\r\n\t" +
"height: 4px;\r\n\tbackground-color: #000;\r\n\t" +
"border-radius: 0px 0px 0px 2px;\r\n\topacity: 0.3;\r\n}";
ganttControl1.HtmlTemplates.Add(TaskProgressTemplate);
Dim TaskProgressTemplate = New DevExpress.Utils.Html.HtmlTemplate()
TaskProgressTemplate.Name = "TaskProgressTemplate"
TaskProgressTemplate.Template = "<div class=""task-progress""></div>"
TaskProgressTemplate.Styles = ".task-progress {" & ControlChars.CrLf & ControlChars.Tab & "display: flex;" & ControlChars.CrLf & ControlChars.Tab & "margin-top: 40px;" & ControlChars.CrLf & ControlChars.Tab & "height: 4px;" & ControlChars.CrLf & ControlChars.Tab & "background-color: #000;" & ControlChars.CrLf & ControlChars.Tab & "border-radius: 0px 0px 0px 2px;" & ControlChars.CrLf & ControlChars.Tab & "opacity: 0.3;" & ControlChars.CrLf & "}"
ganttControl1.HtmlTemplates.Add(TaskProgressTemplate)
HtmlTemplates are stand-alone objects not related to any specific Gantt Control element. To specify that an element should use a specific template, do the following:
Assign method). Note that you can use one template for multiple element types.void GanttControl1_QueryItemTemplate(object sender, QueryItemTemplateEventArgs e) {
switch(e.ItemType) {
case GanttChartItemType.Task:
case GanttChartItemType.SummaryTask:
e.Template.Assign(TaskTemplate);
break;
case GanttChartItemType.Progress:
case GanttChartItemType.SummaryTaskProgress:
e.Template.Assign(TaskProgressTemplate);
break;
case GanttChartItemType.TextLabel:
e.Template.Assign(TaskTextLabelTemplate);
break;
}
}
Private Sub GanttControl1_QueryItemTemplate(ByVal sender As Object, ByVal e As QueryItemTemplateEventArgs)
Select Case e.ItemType
Case GanttChartItemType.Task, GanttChartItemType.SummaryTask
e.Template.Assign(TaskTemplate)
Case GanttChartItemType.Progress, GanttChartItemType.SummaryTaskProgress
e.Template.Assign(TaskProgressTemplate)
Case GanttChartItemType.TextLabel
e.Template.Assign(TaskTextLabelTemplate)
End Select
End Sub
Gantt Control has multiple events that occur when users interact with UI elements that use HTML templates:
When you create templates, set up unique IDs for HTML elements. You can read these IDs from the e.ElementId properties of events to perform actions in response. The code below shows a message with a clicked element’s ID.
private void GanttControl1_HtmlElementMouseClick(object sender, HtmlElementMouseEventArgs e) {
string ElementId = e.ElementId == null ? " an empty " : " the '" + e.ElementId + "' ";
XtraMessageBox.Show("The element with" + ElementId + "ID was clicked");
}
Private Sub GanttControl1_HtmlElementMouseClick(ByVal sender As Object, ByVal e As HtmlElementMouseEventArgs)
Dim ElementId As String = If(e.ElementId Is Nothing, " an empty ", " the '" & e.ElementId & "' ")
XtraMessageBox.Show("The element with" & ElementId & "ID was clicked")
End Sub
You can handle the GanttControl.CustomizeItem event to modify HTML templates at runtime. See this topic for more information.
The following sample from the Gantt Control demo applies custom colors and border radiuses to regular tasks, summary tasks, and labels.
void GanttControl1_CustomizeItem(object sender, CustomizeItemEventArgs e) {
// Retrieve a color for this task from the data source
GanttChartTaskInfo ti = e.Item as GanttChartTaskInfo;
if(ti == null) return;
Color color = (Color)ti.Node.GetValue("Color");
// Find templates for different UI element types
switch (e.ItemType) {
case GanttChartItemType.Task:
case GanttChartItemType.SummaryTask:
// Find element with the "task" ID
var task = e.Element.FindElementById("task");
if(task != null) {
// Set new values for required CSS attributes
task.Style.SetProperty("background-color", color.Name);
task.Style.SetProperty("border-radius", "4px");
}
break;
case GanttChartItemType.TextLabel:
var label = e.Element.FindElementById("label");
if(label != null) {
label.Style.SetProperty("border-color", color.Name);
label.Style.SetProperty("color", color.Name);
}
break;
}
}
Private Sub GanttControl1_CustomizeItem(ByVal sender As Object, ByVal e As CustomizeItemEventArgs)
' Retrieve a color for this task from the data source
Dim ti As GanttChartTaskInfo = TryCast(e.Item, GanttChartTaskInfo)
If ti Is Nothing Then
Return
End If
Dim color As Color = CType(ti.Node.GetValue("Color"), Color)
' Find templates for different UI element types
Select Case e.ItemType
Case GanttChartItemType.Task, GanttChartItemType.SummaryTask
' Find element with the "task" ID
Dim task = e.Element.FindElementById("task")
If task IsNot Nothing Then
' Set new values for required CSS attributes
task.Style.SetProperty("background-color", color.Name)
task.Style.SetProperty("border-radius", "4px")
End If
Case GanttChartItemType.TextLabel
Dim label = e.Element.FindElementById("label")
If label IsNot Nothing Then
label.Style.SetProperty("border-color", color.Name)
label.Style.SetProperty("color", color.Name)
End If
End Select
End Sub
See Also