windowsforms-devexpress-dot-xtratreelist-dot-treelist-8e355b9d.md
A collection of HTML-CSS templates that can be applied to TreeList and Gantt UI elements.
Namespace : DevExpress.XtraTreeList
Assembly : DevExpress.XtraTreeList.v25.2.dll
NuGet Packages : DevExpress.Win.Navigation, DevExpress.Win.TreeList
[XtraSerializableProperty(XtraSerializationVisibility.Collection)]
public HtmlTemplateCollection HtmlTemplates { get; }
<XtraSerializableProperty(XtraSerializationVisibility.Collection)>
Public ReadOnly Property HtmlTemplates As HtmlTemplateCollection
| Type | Description |
|---|---|
| HtmlTemplateCollection |
A collection of HTML-CSS templates.
|
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.
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);
}
}
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.
The Gantt control supports HTML/CSS templates for the following UI elements:
Handle the GanttControl.QueryItemTemplate event to apply a template.
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
Run Demo: HTML/CSS Templates in Gantt
See this help topic for more information: HTML Templates in Gantt Control.
See Also