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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Anchor tags to load in the main content of the sidebar

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
loading
Tags: Sidebar
John Stephen Mangam
Asked On March 20, 2019 12:23 PM UTC

Hi,

Could you please let me know how I could 

click an anchor in the sidebar and see its content load in the main content of the sidebar?

For ex:

If I click anchor link of home, I would want home's view loaded in the main content of the sidebar.

Silambarasan I [Syncfusion]
Replied On March 21, 2019 07:09 PM UTC

Hi John, 
 
Thank you for contacting Syncfusion support. 
 
We have looked into your query with EJ Sidebar. Based on the provided details, we understood that you are expecting Sidebar component in all pages of your application with List with anchor links to navigate to the other pages available in your application. This can be done by rendering the Sidebar in the Master page(_layout.cshtml) of your application. 
 
We have prepared a simple sample with html list having li items with links to navigate to the other pages of the application. 
 
Please, find the sample from the following link. 
 
 
Could you please check the above sample and get back to us if we misunderstood your requirement or need further assistance? 
 
Regards, 
Silambarasan 


John Stephen Mangam
Replied On March 22, 2019 11:27 AM UTC

Hi Silambarasan,

Thank you for sending the sample.

Is there a way to avoid the reloading the entire page and just load the content in the main region?

Thank you.

Deepa Loganathan [Syncfusion]
Replied On March 25, 2019 09:20 AM UTC

Hi John,  
 
Thanks for the update. 
 
To load the content of the other pages in main content element of the Sidebar, you can either use jQuery load() method or ajax to refresh the loaded content in an HTML element. We have modified the sample in our last update to achieve your requirement with AJAX loading. 

Please refer the below code sample to achieve your requirement. 

[RenderPartialView.cshtml] 
 
@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> 
 

The modified sample is available for download in the below link. 


Regards, 
Deepa L. 


John Stephen Mangam
Replied On March 25, 2019 04:24 PM UTC

Thanks a lot for the solution, Deepa.

Deepa Loganathan [Syncfusion]
Replied On March 25, 2019 06:54 PM UTC

 
Hi John, 
 
You are most welcome and glad that the solution provided was helpful. 
 
Please let us know if you have any further queries. 
 
Regards,  
Deepa L. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon