DxTreeViewNode.Template Property
Specifies the template to display a node’s content.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.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 changes 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.