Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 143442 | Mar 20,2019 12:23 PM UTC | Mar 25,2019 06:54 PM UTC | ASP.NET Core - EJ 2 | 5 |
|
Tags: Sidebar |
|
@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> |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
