Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML

Dynamic TreeView

Rate me:
Please Sign up or sign in to vote.
2.71/5 (3 votes)
10 Jun 2008CPOL2 min read 56.1K   555   37   6
Creating a dynamic tree view in ASP.NET.

Introduction

This article describes how to create a server-side treeview with JavaScript to prevent postbacks.

Background

I wanted to use a treeview control to group my data together, and didn't want a large number of postbacks on expand-collapse. I did an original version of this in ASP, and converted most of it over.

Using the Code

To use the dynamic treeview, simply place the control on the form and load the variables.

Once you have put the control on the form, you'll want to create a list of TreeNodeInfo items as found in the DynamicTreeView class file. The TreeNodeInfo constructors will give you the ability to: add a node name, add sub nodes, add an object to be tied to the node, and gray out the selection for active/inactive.

Initialization

Drag DynamicTreeView onto your ASPX page. In the Load or LoadComplete events of your page, place your initialization of the tree nodes.

VB
Dim lstTNI as New List(of TreeNodeInfo)()
Dim lstSubNodes as New List(of TreeNodeInfo)()

lstSubNodes.Add(New TreeNodeInfo("Sub Node 1"))
lstTNI.Add(New TreeNodeInfo("Node1", lstSubNodes.ToArray()))

Now that your tree node info lists are prepared, you are ready to add them to the dynamic treeview control.

VB
Me.DynamicTreeView1.AddNodeRange(lstTNI.ToArray())

Each node has a JavaScript double click tied to it. For my particular project, I needed only the main nodes to have a double click event, so I created the ItemDoubleClicked(Item) method.

JavaScript
var dblClick;
function ItemDoubleClicked(Item)
{
    if (dblClick != null)
        dblClick(Item);
}

This uses the style of the event handler found in C# where it is simply an object being called. If you wish to implement the double click event, you can create another bit of JavaScript that will look like:

JavaScript
function init()
{
    dblClick = DoubleClickHandler;
}
function DoubleClickHandler(item)
{
    //Do Work Here
}

Points of Interest

Feel free to play around with the HTML formatting, I'm not great at it, but the control does what I need it to, so I have no interest in toying with my server-side code until I finally figure it out.

When I created this, my original idea was to add all the nodes one at a time as they came in from the database. For this, I added the AddNode method. Since looping through this would cause a serious performance hit because of the way I rebuilt the control on every add, I don't recommend this method unless you're working inside a page and adding things slowly (user adding).

Since ASP.NET has the incredibly nice feature of renaming all your controls dynamically and my JavaScript isn't all that hot, I had to include a prefix at the beginning of most of my dynamic control changes.

Afterthoughts

After doing more work in ASP.NET AJAX, I learned that this control can be duplicated quite easily in AJAX. However, if you're not able to use AJAX in your page, this is a decent solution, and can be ported to ASP fairly easily.

License

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


Written By
Web Developer
United States United States
I have an Associates degree in Computer Information Technology with emphasis on Windows Development. My primary languages are VB and C# and I'm familiar with: C++, Java, Javascript, and VBScript. I've been involved in the programming field since September 2006 and hope to continue for many years to come.

Comments and Discussions

 
Generalquestion Pin
dsmportal24-Jan-08 7:28
dsmportal24-Jan-08 7:28 
GeneralRe: question Pin
Christian {CC}25-Jan-08 6:22
Christian {CC}25-Jan-08 6:22 
GeneralRe: question Pin
dsmportal25-Jan-08 16:53
dsmportal25-Jan-08 16:53 
GeneralRe: question Pin
Christian {CC}26-Jan-08 4:48
Christian {CC}26-Jan-08 4:48 
GeneralRe: question Pin
dsmportal26-Jan-08 5:49
dsmportal26-Jan-08 5:49 
GeneralRe: question Pin
Christian {CC}30-Jan-08 7:52
Christian {CC}30-Jan-08 7:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.