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.
|
@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> |
