TreeList.HtmlTemplates Property

A collection of HTML-CSS templates that can be applied to TreeList and Gantt UI elements.

Namespace: DevExpress.XtraTreeList

Assembly: DevExpress.XtraTreeList.v23.2.dll

NuGet Packages: DevExpress.Win.Navigation, DevExpress.Win.TreeList

Declaration

C#

[XtraSerializableProperty(XtraSerializationVisibility.Collection)]
public HtmlTemplateCollection HtmlTemplates { get; }

VB.NET

<XtraSerializableProperty(XtraSerializationVisibility.Collection)>
Public ReadOnly Property HtmlTemplates As HtmlTemplateCollection

Property Value

Type	Description
HtmlTemplateCollection	A collection of HTML-CSS templates.

Remarks

HTML Templates in TreeList

The TreeList control supports HTML/CSS templates and allows you to generate unique custom layouts for nodes and its empty space area.

Handle the QueryNodeTemplate and QueryEmptyTreeTemplate events to apply a template from the HtmlTemplates collection based on a condition.

C#

using DevExpress.XtraTreeList;
using DevExpress.HTML.Demos.Modules.TreeList;

// ...
EditingComment editingComment;

private void treeList1_QueryNodeTemplate(object sender, QueryNodeTemplateEventArgs e) {
    var comment = treeList1.GetRow(e.Node.Id);
    if(editingComment != null && editingComment.Comment == comment) {
        if(editingComment.Mode == CommentEditingMode.Editing)
            e.Template.Assign(editCommentTemplate);
        else
            e.Template.Assign(replyCommentTemplate);
    }
}

VB.NET

Imports DevExpress.XtraTreeList
Imports DevExpress.HTML.Demos.Modules.TreeList

' ...
Dim editingComment As EditingComment

Private Sub treeList1_QueryNodeTemplate(ByVal sender As Object, ByVal e As QueryNodeTemplateEventArgs)
    Dim comment = treeList1.GetRow(e.Node.Id)
    If editingComment IsNot Nothing AndAlso editingComment.Comment Is comment Then
        If editingComment.Mode = CommentEditingMode.Editing Then
            e.Template.Assign(editCommentTemplate)
        Else
            e.Template.Assign(replyCommentTemplate)
        End If
    End If
End Sub

Run Demo: HTML/CSS Templates in TreeList

Use the NodeHtmlTemplate property to specify the default HTML-CSS template for nodes.

HTML Templates in Gantt Control

The 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

Handle the GanttControl.QueryItemTemplate event to apply a template.

C#

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;
    }
}

VB.NET

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

Run Demo: HTML/CSS Templates in Gantt

See this help topic for more information: HTML Templates in Gantt Control.