How to create ASP.NET MVC TreeView dynamically ?

Question

2.00/5 (1 vote)

See more:

Hi,

I am very new to ASP.NET MVC. I want to create treeview dynamically at runtime with user input for root, parent and chid node.

I want there should be buttons (ADD Root, Add Node, Delete Node, Edit Node) and there should me textbox. When user enter text in textbox
and click on ADD Root button, it should create ROOT NODE, and in this way user should be able to create parent and child nodes also.

Can any body please send me any link or code for this TreeView.

Thanks in advance

Posted 15-Sep-10 18:34pm

Member 3205393

Add a Solution

Comments

HimanshuJoshi 17-Sep-10 9:02am

Have you tried to do anything on this? I suggest since you are new, read some books on ASP.NET, read some technical articles and then try to do it yourself.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Answer 1 · 2010-11-22T08:30:00

Solution 1

Try these

Rendering a tree view using the MVC Framework[^]

Hierarchical Treeview with ASP.NET MVC & jQuery[^]

Posted 22-Nov-10 8:30am

thatraja

Ray_Liang · Answer 2 · 2011-04-02T20:25:00

I think you should try the DJME 2 package there is a jQuery treeview extension for Mvc3 here is the live demo :
DJME2 live demo

And this is the TreeView extension usage:

C#

@{
    Ajax.Dna().TreeView("Tree1")
        .ExpandedLevel(0)
                   .Items(items =>
                   {
                       items.Add("Accordion", "#", Url.Content("~/webshared/home/images/dj_icons/icon_accordion.gif"))
                               .Items(subItems =>
                               {
                                   subItems.Add("Core feature", "#", Url.Content("~/content/images/icon_normal.gif"));
                                   subItems.Add("Autosize mode", "#", Url.Content("~/content/images/icon_normal.gif"));
                                   subItems.Add("Collapsible sections", "#", Url.Content("~/content/images/icon_normal.gif"));
                                   subItems.Add("Customize icons", "#", Url.Content("~/content/images/icon_normal.gif"));
                                   subItems.Add("NavView", "#", Url.Content("~/content/images/icon_normal.gif"))
                                                 .Items(navItems =>
                                                 {
                                                     navItems.Add("NavView Features", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                     navItems.Add("Client side event handling", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                     navItems.Add("Post back & Server events", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                     navItems.Add("Programmatic NavView creation", "#", Url.Content("~/content/images/icon_normal.gif"));
                                                 });
                               });
                       items.Add("DatePicker", "#", Url.Content("~/webshared/home/images/dj_icons/icon_datepicker.gif"))
                              .Items(subItems =>
                              {
                                  subItems.Add("Core feature", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Format date", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Restrict date range", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Localize calendar", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Populate alternate field", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Display modes", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Display button bar", "#", Url.Content("~/content/images/icon_normal.gif"));
                                  subItems.Add("Display multiple months", "#", Url.Content("~/content/images/icon_normal.gif"));
                              });
                       items.Add("AutoComplete", "#", Url.Content("~/webshared/home/images/dj_icons/icon_autoComplete.gif"))
                               .Items(subItems =>
                               {
                                   subItems.Add("Default feature", "#", Url.Content("~/content/images/fav.gif"));
                                   subItems.Add("Remote data source", "#", Url.Content("~/content/images/fav.gif"));
                                   subItems.Add("Remote data with caching", "#", Url.Content("~/content/images/fav.gif"));
                                   subItems.Add("Scrollable results", "#", Url.Content("~/content/images/ok.gif"));
                                   subItems.Add("Multiple & remote", "#", Url.Content("~/content/images/ok.gif"));
                               });
                   })
                   .Render();
}