Template.cshtml

@using Syncfusion.EJ2.Navigations
@using Syncfusion.EJ2
@section ControlsSection{
    <div class="control-section">
    <div class="control_wrapper">
             @Html.EJS().TreeView("template").NodeTemplate("#treeTemplate").Fields(ViewBag.templatefields).Render()
        </div>
    </div>
@*custom code start*@
<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>
@*custom code end*@    
}

@section PreScripts {
    <script id="treeTemplate" type="text/x-template">
        <div>
            <div class="treeviewdiv">
                <div class="nodetext">
                    <span class="treeName">${name}</span>
                </div>
                ${if(count)}
                <div class="nodebadge">
                    <span class="treeCount e-badge e-badge-primary">${count}</span>
                </div>
                ${/if}
            </div>
        </div>
</script>
}

@section Meta{
                    <meta name="description" content="This example demonstrates the Template in ASP.NET MVC TreeView control. Explore here for more details."/>
                }

@section ActionDescription{

  <div id="action-description">
    <p>This 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>
</div>

}
@section Description{

  <div id="description">
      <p>The <code>TreeView</code> component has an option to customize the node structure through the <code>nodeTemplate</code> property, 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>
      <p>For more information, you can refer to the <a href="https://ej2.syncfusion.com/aspnetmvc/documentation/treeview/template/" target="_blank">Templates</a> section from the documentation.</p>
  </div>

}



@section Title{
                    <title>ASP.NET MVC TreeView Template Example - Syncfusion Demos </title> 
                }
@section Header{
                    <h1 class='sb-sample-text'>Example of Template in ASP.NET MVC TreeView Control</h1>
                }