TreeViewNode.Template Property

Gets or sets a template used for displaying the content of the particular node.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll

Declaration

C#

[DefaultValue(null)]
public virtual ITemplate Template { get; set; }

VB.NET

<DefaultValue(Nothing)>
Public Overridable Property Template As ITemplate

Property Value

Type	Default	Description
ITemplate	*null*	An object supporting the System.Web.UI.ITemplate interface which contains the template used for displaying the node’s content.

Remarks

Use the Template property to control the contents of the particular node. The template defined using this property replaces the content of a node - in particular, the node’s check box, image and specified text.

In order to define a common content for all nodes within an ASPxTreeView control, the ASPxTreeView.NodeTemplate property can be used.

Note

Once a template defined by this property is created, it is instantiated within a container represented by the TreeViewNodeTemplateContainer class. The TreeViewNodeTemplateContainer class implements a set of properties which can be useful when designing a template and binding the controls composing this template to data.

Example

This example demonstrates how you can create templates.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-templates-e2511

Default.aspx.cs

protected void Page_Load(object sender, EventArgs e)
{
    ASPxTreeView1.ExpandAll();
}

Default.aspx (C#)

<dx:ASPxTreeView ID="ASPxTreeView1" runat="server" Width="386px" Height="354px">
    <NodeTextTemplate>
          <b><%# Eval("Text") %></b>
          <br><%# Eval("Name") %>
    </NodeTextTemplate>
    <Nodes>
        <dx:TreeViewNode>
            <Nodes>
                <dx:TreeViewNode Name="ASPxHTMLEditor? Suite" Text="HTML Editor for ASP.NET">
                    <Image Url="~/Images/ASPxHtmlEditor.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="ASPxMenu? " Text="Menu for ASP.NET">
                    <Image Url="~/Images/ASPxMenu.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="ASPxEditors? Library" Text="Data Editors for ASP.NET">
                    <Image Url="~/Images/ASPxEditors.png">
                    </Image>
                </dx:TreeViewNode>
            </Nodes>
            <Template>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="277px" ShowHeader="False" Font-Bold="True">
                    <PanelCollection>
                        <dx:PanelContent runat="server">
                            <table>
                               <tr>
                               <td style="height: 52px">
                                  <img src="Images/asp.png" />
                               <td style="height: 52px">
                                 <span style="font-size: 12pt;">
                                ASP.NET AJAX Controls</span>
                            </table></dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxRoundPanel>
           </Template>
        </dx:TreeViewNode>
        <dx:TreeViewNode>
            <Nodes>
                <dx:TreeViewNode Name="XtraGrid? Suite " Text="Grid and Data Editors for WinForms">
                    <Image Url="~/Images/XtraGrid.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="XtraPivotGrid? Suite " Text="OLAP Data Mining Control for WinForms">
                    <Image Url="~/Images/XtraPivotGrid.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="XtraTreeList? Suite " Text="TreeView-Grid Hybrid for WinForms">
                    <Image Url="~/Images/XtraTreeList.png">
                    </Image>
                </dx:TreeViewNode>
            </Nodes>
             <Template>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel2" runat="server" Width="239px" ShowHeader="False" Font-Bold="True" Height="48px">
                    <PanelCollection>
                        <dx:PanelContent runat="server">
                            <table>
                               <tr>
                               <td style="height: 54px">
                                 <img src="Images/win.png" />
                               <td style="height: 54px">
                                 <span style="font-size: 12pt;">
                                 WinForms Controls </span>
                            </table></dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxRoundPanel>
            </Template>
        </dx:TreeViewNode>
    </Nodes>
    <Styles>
        <NodeImage>
            <Paddings Padding="2px" />
        </NodeImage>
    </Styles>
</dx:ASPxTreeView>

Default.aspx (VB.NET)

<dx:ASPxTreeView ID="ASPxTreeView1" runat="server" Width="386px" Height="354px">
    <NodeTextTemplate>
          <b><%#Eval("Text")%></b>
          <br><%#Eval("Name")%>
    </NodeTextTemplate>
    <Nodes>
        <dx:TreeViewNode>
            <Nodes>
                <dx:TreeViewNode Name="ASPxHTMLEditor? Suite" Text="HTML Editor for ASP.NET">
                    <Image Url="~/Images/ASPxHtmlEditor.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="ASPxMenu? " Text="Menu for ASP.NET">
                    <Image Url="~/Images/ASPxMenu.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="ASPxEditors? Library" Text="Data Editors for ASP.NET">
                    <Image Url="~/Images/ASPxEditors.png">
                    </Image>
                </dx:TreeViewNode>
            </Nodes>
            <Template>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel1" runat="server" Width="277px" ShowHeader="False" Font-Bold="True">
                    <PanelCollection>
                        <dx:PanelContent runat="server">
                            <table>
                               <tr>
                               <td style="height: 52px">
                                  <img src="Images/asp.png" />
                               <td style="height: 52px">
                                 <span style="font-size: 12pt;">
                                ASP.NET AJAX Controls</span>
                            </table></dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxRoundPanel>
           </Template>
        </dx:TreeViewNode>
        <dx:TreeViewNode>
            <Nodes>
                <dx:TreeViewNode Name="XtraGrid? Suite " Text="Grid and Data Editors for WinForms">
                    <Image Url="~/Images/XtraGrid.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="XtraPivotGrid? Suite " Text="OLAP Data Mining Control for WinForms">
                    <Image Url="~/Images/XtraPivotGrid.png">
                    </Image>
                </dx:TreeViewNode>
                <dx:TreeViewNode Name="XtraTreeList? Suite " Text="TreeView-Grid Hybrid for WinForms">
                    <Image Url="~/Images/XtraTreeList.png">
                    </Image>
                </dx:TreeViewNode>
            </Nodes>
             <Template>
                <dx:ASPxRoundPanel ID="ASPxRoundPanel2" runat="server" Width="239px" ShowHeader="False" Font-Bold="True" Height="48px">
                    <PanelCollection>
                        <dx:PanelContent runat="server">
                            <table>
                               <tr>
                               <td style="height: 54px">
                                 <img src="Images/win.png" />
                               <td style="height: 54px">
                                 <span style="font-size: 12pt;">
                                 WinForms Controls </span>
                            </table></dx:PanelContent>
                    </PanelCollection>
                </dx:ASPxRoundPanel>
            </Template>
        </dx:TreeViewNode>
    </Nodes>
    <Styles>
        <NodeImage>
            <Paddings Padding="2px" />
        </NodeImage>
    </Styles>
</dx:ASPxTreeView>

Default.aspx.vb

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
    ASPxTreeView1.ExpandAll()
End Sub