Template.razor

@page "/treeview/template"

@using Syncfusion.Blazor.Lists
@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent;

<SampleDescription>
    <p> The <a href='https://www.syncfusion.com/blazor-components/blazor-treeview' target='_blank'>Blazor TreeView</a> sample demonstrates the template functionalities of the TreeView. Select the root node by clicking on it, or expand the root node and select the customized child node.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>TreeView</code> component has an option to customize the node structure through the <code>NodeTemplate</code> tag, so that the tree node can be formed with any custom structure.</p>
   <p>In this demo, the node is formed as like webmail with folder name and number of unread messages.</p>
</ActionDescription>

<div class="control_wrapper">
<SfTreeView TValue="TreeData">
    <TreeViewFieldsSettings Id="Id" Text="Name" ParentID="Pid" HasChildren="HasChild" Selected="Selected" Expanded="Expanded" DataSource="@LocalData"></TreeViewFieldsSettings>
    <TreeViewTemplates TValue="TreeData">
        <NodeTemplate>
            <div>
                <div class="treeviewdiv">
                    <div class="nodetext">
                        <span class="treeName">@((context as TreeData).Name)</span>
                    </div>
                    @{

                        @if (((context as TreeData).Count) != 0)
                        {
                            <div class="nodebadge">
                                <span class="treeCount e-badge e-badge-primary">@((context as TreeData).Count)</span>
                            </div>
                        }
                    }
                </div>
            </div>
        </NodeTemplate>
    </TreeViewTemplates>
</SfTreeView>
</div>

@code{

    List<TreeData> LocalData = new List<TreeData>();
    
    protected override void OnInitialized()
    {
        base.OnInitialized();
        LocalData.Add(new TreeData
        {
            Id = "1",
            Name = "Favorites",
            HasChild = true,
        });
        LocalData.Add(new TreeData
        {
            Id = "2",
            Pid = "1",
            Name = "Sales Reports",
            Count = 4

        });
        LocalData.Add(new TreeData
        {
            Id = "3",
            Pid = "1",
            Name = "Sent Items"
        });

        LocalData.Add(new TreeData
        {
            Id = "4",
            Pid = "1",
            Name = "Marketing Reports",
            Count = 6
        });
        LocalData.Add(new TreeData
        {
            Id = "5",
            HasChild = true,
            Name = "My Folder",
            Expanded = true
        });
        LocalData.Add(new TreeData
        {
            Id = "6",
            Pid = "5",
            Name = "Inbox",
            Selected = true,
            Count = 20
        });
        LocalData.Add(new TreeData
        {
            Id = "7",
            Pid = "5",
            Name = "Drafts",
            Count = 5
        });
        LocalData.Add(new TreeData
        {
            Id = "8",
            Pid = "5",
            Name = "Deleted Items"
        });
        LocalData.Add(new TreeData
        {
            Id = "9",
            Pid = "5",
            Name = "Sent Items"
        });
        LocalData.Add(new TreeData
        {
            Id = "10",
            Pid = "5",
            Name = "Sales Reports",
            Count = 4
        });
        LocalData.Add(new TreeData
        {
            Id = "11",
            Pid = "5",
            Name = "Marketing Reports",
            Count = 6
        });
        LocalData.Add(new TreeData
        {
            Id = "12",
            Pid = "5",
            Name = "Outbox"
        });

    }
    class TreeData
    {
        public string Id { get; set; }
        public string Pid { get; set; }
        public string Name { get; set; }
        public bool HasChild { get; set; }
        public bool Expanded { get; set; }
        public int Count { get; set; }
        public bool Selected { get; set; }
    }
}
<style>
    .control_wrapper {
        max-width: 320px;
        margin: auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }

    .e-treeview .e-list-text {
        width: 100%;
    }

    .treeCount.e-badge {
        padding: 0.4em;
        vertical-align: text-bottom;
    }

    .material .treeCount.e-badge {
        vertical-align: middle;
    }

    .nodetext {
        float: left;
    }

    .e-rtl .nodetext {
        float: right;
    }

    .nodebadge {
        float: right;
        margin-right: 5px
    }

    .e-rtl .nodebadge {
        float: left;
        margin-left: 5px
    }
</style>