Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxTreeViewNode.Template Property

Specifies the template to display a node’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
[Parameter]
public RenderFragment<ITreeViewNodeInfo> Template { get; set; }

#Property Value

Type Description
RenderFragment<ITreeViewNodeInfo>

The template content.

#Remarks

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 changes the text settings and the expand button’s position for the root node only:

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

@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