Skip to main content

DxTreeViewNode.Template Property

Specifies the template to display a node’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.1.dll

NuGet Package: DevExpress.Blazor


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

Property Value

Type Description

The template content.


In the TreeView’s unbound mode, use the Template property to customize an individual node’s content. Use the template’s context parameter to access a ITreeViewNodeInfo object that stores information about a node (the text, level, bound data item, etc.)

The following example demonstrates how to change the text settings and the expand button’s position for the root node only:

<DxTreeView @ref="@treeView">
        <DxTreeViewNode Name="Components" Text="Components">
                <h4 class="my-0 p-2 d-flex align-items-center justify-content-between">
                    <span class="mr-3">@context.Text</span>
                    <small class="@GetExpandButtonCssClass(context.Name)" style="top: 0px"></small>
                <DxTreeViewNode Name="DataGrid" Text="Data Grid" />
                <DxTreeViewNode Name="PivotGrid" Text="Pivot Grid" />
                @* ... *@

@code {  
    DxTreeView treeView;  
    string GetNodeExpandButtonCssClass(string nodeName)  { 
        return String.Format("oi oi-chevron-{0}", treeView.GetNodeExpanded(n => n.Name == nodeName) ? "bottom" : "right"); 

TreeViewNode Template

The TextTemplate property allows you to specify a template for an individual node’s text.

To specify common templates for all TreeView nodes, use the DxTreeView.NodeTextTemplate and DxTreeView.NodeTemplate properties.

See Also