We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
@using Syncfusion.EJ2.Navigations
@{
TreeViewFieldsSettings templateFields = new TreeViewFieldsSettings();
TreeviewTemplate treeviewTemplate = new TreeviewTemplate();
templateFields.DataSource = treeviewTemplate.getTreeviewTemplate();
templateFields.HasChildren = "HasChild";
templateFields.Id = "Id";
templateFields.ParentID = "PId";
templateFields.Text = "Name";
}
<script>
function expanding(args) {
//Sidebar will expand along with treeview On clicking the treeview node to expand
var instance = document.getElementById("default-sidebar").ej2_instances[0];
instance.show();
}
function collapsing(args) {
var instance = document.getElementById("default-sidebar").ej2_instances[0];
//treeviewInstance = document.getElementById('template').ej2_instances[0];
if (args.nodeData.id == "1") {
//When on collapsing the parent of treeview, sidebar also collapses to dock state
instance.hide();
}
}
</script>
<script>
var win = window;
win.isManualResizeTrigger = true;
setTimeout(() => { win.dispatchEvent(new Event('resize')); }, 500);
document.addEventListener('DOMContentLoaded', function () {
sidebarInstance = document.getElementById("default-sidebar").ej2_instances[0];
sidebarInstance.show();
});
function onNodeClick(args) {
if (args.node.outerText != "Home") {
$.ajax({
url: ('/Home/' + args.node.outerText).toString(),
success: function (data) {
//Sidebar will consider the html element which has 'maincontent' class as its main content element
$(".maincontent").html(data);
}
})
} else {
$.ajax({
url: '/Home/',
success: function (data) {
//Sidebar will consider the html element which has 'maincontent' class as its main content element
$(".maincontent").html(data);
}
})
}
}
</script>
<script id="treeTemplate" type="text/x-template">
<div>
<img class="eimage" src="/images/${EImg}.png" alt="${EImg}" />
<div class="ename">${Name}</div>
</div>
</script>
<ejs-sidebar id="default-sidebar" type="Push" dockSize="80px" enableDock=true target="maincontent">
<e-content-template>
<ejs-treeview id="template" nodeTemplate="#treeTemplate" nodeExpanded="expanding" nodeCollapsing="collapsing" cssClass="custom" fields="templateFields" nodeSelected="onNodeClick">
</ejs-treeview>
</e-content-template>
</ejs-sidebar> |
