DxTreeViewNode.Template Property

Specifies the template to display a node’s content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[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 demonstrates how to change the text settings and the expand button’s position for the root node only:

<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"); 
    } 
} 

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.