DxTreeViewBase.NodeTemplate Property

Specifies the common template used to display all nodes.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.dll


public RenderFragment<ITreeViewNodeInfo> NodeTemplate { get; set; }

Property Value

Type Description

The template content for an object of the ITreeViewNodeInfo type that provides information about a node (the text, level, bound data item, etc.)


Use the NodeTemplate property to specify a template for the content of all TreeView nodes.

The following example demonstrates how to:

  • change the text settings and the expand/collapse button's position for the root node;
  • provide custom images and multi-line text content for other nodes.
<DxTreeView @ref="@treeView"
            ChildrenExpression="@(dataItem => ((ComponentSet)dataItem).ComponentSets)">
            var dataItem = (ComponentSet)context.DataItem;
        @if (!context.IsLeaf)
            <h4 class="my-0 p-2 d-flex align-items-center justify-content-between">
                <span class="mr-3">@dataItem.Title</span>
                <small class="@GetExpandButtonCssClass(dataItem)" style="top: 0px"></small>
            <div class="media p-2">
                <img src="@dataItem.ImageUrl" class="bg-primary rounded mr-3" style="padding: 2px; width: 30px; height: 30px;" alt="@dataItem.Title" />
                <div class="media-body">
                    <h5 class="mt-0">@dataItem.Title</h5>

@code {
    DxTreeView treeView;

    string GetExpandButtonCssClass(ComponentSet nodeDataItem)
        return String.Format("oi oi-chevron-{0}", treeView.GetNodeExpanded(n => n.DataItem == nodeDataItem) ? "bottom" : "right");


The NodeTextTemplate property allows you to define a template for the text of all TreeView nodes.

In unbound mode, you can also use the DxTreeViewNode.TextTemplate and DxTreeViewNode.Template properties to apply templates to individual nodes.

Online Demo

TreeView - Templates

See Also