Skip to main content
All docs
V24.1

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.

HTML templates in Gantt Control

Run Demo: HTML in Gantt Control Run Demo: Interactive HTML Elements

Supported Elements

Gantt Control supports HTML/CSS templates for the following UI elements:

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.

Template Editor

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:

  1. Handle the GanttControl.QueryItemTemplate event.
  2. Check the e.ItemType property value to identify the element type (regular task, summary task, baseline, etc.).
  3. Assign the required template to the e.Template property (this property is read-only, use the 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;
    }
}

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.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;
    }
}
See Also