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.
Unfortunately, activation email could not send to your email. Please try again.

Node url

Thread ID:

Created:

Updated:

Platform:

Replies:

129491 Mar 21,2017 07:22 PM Mar 27,2017 08:32 AM ASP.NET MVC 3
loading
Tags: TreeView
Bernard Jurlina
Asked On March 21, 2017 07:22 PM

Is it possible to use a treeview for sidebar menu in MVC project? 
For example, I want to display a treeview on the left side in Layout page and if a node has url defined for some controller/action to open in on the right side of the Layout page.

Thanks!

Ashokkumar Balasubramanian [Syncfusion]
Replied On March 22, 2017 11:24 AM

Hi Bernard, 
 
Yes, it is possible to use our Treeview component for Sidebar Menu.  
 
You can use the “NodeSelect” event of Treeview component to achieve your requirement. Also in this case, you have to pass the view page name to the ajax request, Controller will retrun the corresponding view page on ajax success method and load this view page to Right Side of Layout Page. 
    
Please check the below code block. 
 
[Script] 
 
function onNodeSelect(args) { 
                var value = args.value; 
                if (value == "Home" ||value=="File") 
                    value="Index" 
                 $.ajax({ 
                    url: "/Home/"+value, 
                    type: "POST", 
                    dataType: "json", 
                    success: function (data) { 
                        var theDiv = document.getElementById("rightsideTree"); 
                        theDiv.innerHTML = data; 
                    } 
                }); 
            } 
 
For your convenience we have prepared simple sample, it can be downloaded in below location. 
 
 
To know more details about the “NodeSelect” event, please refer the below API document. 
 
 
Please let us know, if you have any other concerns. 
 
Regards, 
Ashokkumar B. 


Bernard Jurlina
Replied On March 26, 2017 01:26 PM

Excellent, thank you.
It's working like a charm.

Just, I have one more question. Still, I had to do it other way, I'm calling controller method through the window.url action and that means that the whole page loads from the start. When it loads, my treeview loses expanded nodes state and I want to get it back after page loads.

I tried with expandedNodes but could not get it work. So, when I called window.url from onNodeSelect function, the new page opens and I tried to expand nodes, for example, ids 6 and 19 with treeview.expandedNodes = [6, 19] but with no luck.

Is there some example for this?
Thanks!

Ashokkumar Balasubramanian [Syncfusion]
Replied On March 27, 2017 08:32 AM

Hi Bernard  
   
We have analyzed your query (“treeview loses expanded nodes state”). We suspect that, the reported issue occurs due to treeview component was reinitialaized when reloading the page. You can resolve this problem by using “EnablePersistence” property of Treeview component. Please find the below code snippet.   
   
[CSHTML]   
   
@Html.EJ().TreeView("tree").Items(items =>   
                {   
                    items.Add().Text("File").Children(child =>   
                    {   
                        child.Add().Text("Home");   
                        child.Add().Text("About");   
                        child.Add().Text("Contact");   
                    });   
                }).ClientSideEvents(evt => evt.NodeSelect("onNodeSelect")).EnablePersistence(true);   
   
   
To know more details about “EnablePersistence” property, please refer the below API document  
   
   
Regards    
Ashokkumar B.   


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.

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.

;