Node url

[Bernard Jurlina]

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]

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. 

 

Sample. 

 

To know more details about the “NodeSelect” event, please refer the below API document. 

 

https://help.syncfusion.com/api/js/ejtreeview#events:nodeselect 

 

Please let us know, if you have any other concerns. 

 

Regards, 

Ashokkumar B. 

[Bernard Jurlina]

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]

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.   

   

https://help.syncfusion.com/api/js/ejtreeview#members:enablepersistence   

   

Regards    

Ashokkumar B.