TreeView Templates

Feb 02, 2023
3 minutes to read

The TreeView supports template technology , allowing you to completely customize the element’s appearance and layout. The look of the TreeView default elements can be completely modified by creating a specific template, defining how an element will be rendered by a client browser.

The TreeView allows you to create templates for two element types: the node text content and the entire node content. You can apply templates for all identical elements within the TreeView (using extension level templates) or for a particular element (using node level templates).

The table below lists the members used to create templates.

	Entire node content templates	Node text content templates
Extension level templates	TreeViewSettings.SetNodeTemplateContent	TreeViewSettings.SetNodeTextTemplateContent
Node level templates	MVCxTreeViewNode.SetTemplateContent	MVCxTreeViewNode.SetTextTemplateContent

Note that templates created at the node level override extension level templates.

Example: Creating Templates (ASPX)

This example demonstrates how a template can be defined in a view. The result is shown by the first image in this topic (see it above).

View code (ASPX):

csharp

<%
     Html.DevExpress().TreeView(
          settings =>
               {
               settings.Name = "tvTemplates";
               settings.ControlStyle.CssClass = "componentTree";
               settings.EnableHotTrack = false;
               settings.Nodes.Add(node => {
                    node.Text = "ASP.NET AJAX Controls";
                    node.Name = "ASP";
                    node.Image.Url = "~/Content/TreeView/Controls/ASP.png";
                    node.Nodes.Add("HTML Editor for ASP.NET", "ASPxHTMLEditor™ Suite", "~/Content/TreeView/Controls/ASPxHtmlEditor.png");
                    node.Nodes.Add("Menu for ASP.NET", "ASPxMenu™", "~/Content/TreeView/Controls/ASPxMenu.png");
                    node.Nodes.Add("Data Editors for ASP.NET", "ASPxEditors™ Library", "~/Content/TreeView/Controls/ASPxEditors.png");
               });
               settings.Nodes.Add(node => {
                    node.Text = "WinForms Controls";
                    node.Name = "Win";
                    node.Image.Url = "~/Content/TreeView/Controls/Win.png";
                    node.Nodes.Add("Grid and Data Editors for WinForms", "XtraGrid™ Suite", "~/Content/TreeView/Controls/XtraGrid.png");
                    node.Nodes.Add("OLAP Data Mining Control for WinForms", "XtraPivotGrid™ Suite", "~/Content/TreeView/Controls/XtraPivotGrid.png");
                    node.Nodes.Add("TreeView-Grid Hybrid for WinForms", "XtraTreeList™ Suite", "~/Content/TreeView/Controls/XtraTreeList.png");
               });
               settings.SetNodeTemplateContent(c =>
               {
                    if(c.Node.Nodes.Count > 0){
                        %>
                             " align="middle" class="img" src="<%= Url.Content(c.Node.Image.Url) %>" />
                             <div class="head">
                             <%= c.Node.Text %>
                             </div>
                        <%
               }
                    else{
                        %>
                             " align="middle" class="img" src="<%= Url.Content(c.Node.Image.Url) %>" />
                             <div class="body">
                                 <a href="javascript:void(0)" class="link">
                                      <%= c.Node.Text %>
                                 </a>
                                 

                                 <span>
                                      <%= c.Node.Name %>
                                 </span>
                             </div>
                        <%
                    }
               });
               settings.PreRender = (source, e) => {
                    ASPxTreeView treeView = (ASPxTreeView)source;
                    treeView.ExpandAll();
               };
     })
     .Render();
%>

Example: Creating Templates (Razor)

This example demonstrates how a template can be defined in a view. The result is shown by the first image in this topic (see it above).

View code (Razor)

csharp

@Html.DevExpress().TreeView(
    settings =>
    {
        settings.Name = "tvTemplates";
        settings.ControlStyle.CssClass = "componentTree";
        settings.EnableHotTrack = false;

        settings.Nodes.Add(node => {
            node.Text = "ASP.NET AJAX Controls";
            node.Name = "ASP";
            node.Image.Url = "~/Content/TreeView/Controls/ASP.png";

            node.Nodes.Add("HTML Editor for ASP.NET", "ASPxHTMLEditor™ Suite", "~/Content/TreeView/Controls/ASPxHtmlEditor.png");
            node.Nodes.Add("Menu for ASP.NET", "ASPxMenu™", "~/Content/TreeView/Controls/ASPxMenu.png");
            node.Nodes.Add("Data Editors for ASP.NET", "ASPxEditors™ Library", "~/Content/TreeView/Controls/ASPxEditors.png");
        });
        settings.Nodes.Add(node => {
            node.Text = "WinForms Controls";
            node.Name = "Win";
            node.Image.Url = "~/Content/TreeView/Controls/Win.png";

            node.Nodes.Add("Grid and Data Editors for WinForms", "XtraGrid™ Suite", "~/Content/TreeView/Controls/XtraGrid.png");
            node.Nodes.Add("OLAP Data Mining Control for WinForms", "XtraPivotGrid™ Suite", "~/Content/TreeView/Controls/XtraPivotGrid.png");
            node.Nodes.Add("TreeView-Grid Hybrid for WinForms", "XtraTreeList™ Suite", "~/Content/TreeView/Controls/XtraTreeList.png");
        });

        settings.SetNodeTemplateContent(c => 
        {
            if(c.Node.Nodes.Count > 0){
                ViewContext.Writer.Write(
                    "" +
                    "<div class=\"head\">" + c.Node.Text + "</div>"
                );
            } 
            else{
                ViewContext.Writer.Write( 
                    "" +
                    "<div class=\"body\">" +
                        "<a href=\"javascript:void(0)\" class=\"link\">" + c.Node.Text + "</a>" +
                        "
" +
                        "<span>" + c.Node.Name + "</span>" +
                        "</div>"
                    );
            }
        });
        settings.PreRender = (source, e) => {
            ASPxTreeView treeView = (ASPxTreeView)source;
            treeView.ExpandAll();
        };
    }).GetHtml()