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. Image for the cookie policy date

Node url

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.


3 Replies

AB Ashokkumar Balasubramanian Syncfusion Team March 22, 2017 03:24 PM UTC

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. 
function onNodeSelect(args) { 
                var value = args.value; 
                if (value == "Home" ||value=="File") 
                    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. 
Ashokkumar B. 

BJ Bernard Jurlina March 26, 2017 05:26 PM UTC

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?

AB Ashokkumar Balasubramanian Syncfusion Team March 27, 2017 12:32 PM UTC

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.   
@Html.EJ().TreeView("tree").Items(items =>   
                    items.Add().Text("File").Children(child =>   
                }).ClientSideEvents(evt => evt.NodeSelect("onNodeSelect")).EnablePersistence(true);   
To know more details about “EnablePersistence” property, please refer the below API document  
Ashokkumar B.   

Live Chat Icon For mobile
Up arrow icon