HTML Templates in Gantt Control
- 4 minutes to read
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.
Supported Elements
Gantt Control supports HTML/CSS templates for the following UI elements:
- Tasks, Summaries, and Milestones
- Regular and Summary Task Progress
- Regular, Summary, and Milestone Task Baselines
- Text Labels
- Interaction Tooltips
- Split Tasks
How to Define Gantt Control Templates
At Design Time
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.
In Code
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);
How to Assign Templates
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:
- Handle the GanttControl.QueryItemTemplate event.
- Check the
e.GanttChartItemTypeproperty value to identify the element type (regular task, summary task, baseline, etc.). - Assign the required template to the
e.Templateproperty (this property is read-only, use theAssignmethod). 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;
}
}
Interaction
Gantt Control has multiple events that occur when users interact with UI elements that use HTML templates:
- HtmlElementMouseClick
- HtmlElementMouseMove
- HtmlElementMouseDown
- HtmlElementMouseUp
- HtmlElementMouseOver
- HtmlElementMouseOut
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");
}
Template Customization
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.ElementInfo.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.ElementInfo.FindElementById("label");
if(label != null) {
label.Style.SetProperty("border-color", color.Name);
label.Style.SetProperty("color", color.Name);
}
break;
}
}