template.html

<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        <!-- Initialize TreeView -->
        <div id="tree"></div>
    </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;
    }
</style>
<!-- custom code end -->
<!-- Template to render tree node -->
<script id="treeTemplate" type="text/x-template">
 <div>
    <div class="treeviewdiv">
        <div style="float:left">
            <span class="treeName">${name}</span>
        </div>
        ${if(count)}
            <div style="margin-right: 5px; float:right">
                <span class="treeCount e-badge e-badge-primary" >${count}</span>
            </div>
        ${/if}
    </div>
</div>
</script>
<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>

<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/javascript/documentation/treeview/template/" target="_blank">Templates</a> section from the documentation.</p>
</div>