1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Anchor tags to load in the main content of the sidebar

Anchor tags to load in the main content of the sidebar

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.

5 Replies
SI Silambarasan I Syncfusion Team 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 


JS John Stephen Mangam 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.

DL Deepa Loganathan Syncfusion Team 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. 


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

Thanks a lot for the solution, Deepa.

DL Deepa Loganathan Syncfusion Team 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. 


Loader.
Up arrow icon