DxTreeViewNode.Template Property

Specifies the template to display a node's content.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

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

Property Value

Type Description
RenderFragment<ITreeViewNodeInfo>

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

Remarks

In the TreeView's unbound mode, use the Template property to customize an individual node's content.

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="@GetExpandButtonCssClass2(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"); 
    } 
} 

Blazor-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