ASP.NET Tree Control - CodeProject

ASP.NET tree control is a Custom Control (.ascx) that builds a tree structure. All you have to do is to use two methods of the control. The AddNodeDiv which will add the Node and BuildTree which will build it.

Sample Image - Preview.gif

Introduction

ASP.NET tree control is a Custom Control (.ascx) that builds a tree structure. All you have to do is to use two methods of the control. The AddNodeDiv which will add a Node and BuildTree which will build it. Please note that the Node type parent should be only used for the first level nodes. The Node Click event is raised and the source code is in JavaScript file. The control also selects the current node. You can make this as a DLL by just copying the methods and properties to a class file

The following will explain how to use the control:

Add the mrTree.ascx, mrtree.ascx.vb, mrFunctions.js, plus.gif, minus.gif files to your Visual Studio .NET project.
Drag the mrTree.ascx to your aspx page (in design mode).
Declare your tree (Public mrTree1 As mrTree)
Use the AddNodeDiv method of the Tree to build your nodes (See examples).
Once you have added all your Nodes, call the BuildTree() method to build the tree.
If there are any errors in building, the control will write it to Errors property of the tree.
The JavaScript file has the function which run when you click the node.
You can always change the source code to fit your needs.

I hope this helps.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

Murthy Rojukhirdu

Web Developer

United States

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Code License

qbak22

11:32 28 Jun '07

Is there licensing attached to this code? Also how do you move the tree structure?
Sign In·View Thread·Permalink	1.50/5 (2 votes)

Is it possible to create .dll file from user controls(.ascx) in C# .net

Yasotha Devi

20:26 24 Oct '06

hi, Is it possible to create .dll file from user control(.ascx) in C# .net? If wecan, how do achieve it? please give me a solution ASAP. Regards, Yasotha
Sign In·View Thread·Permalink	2.00/5 (3 votes)

i can't move tree

Centurion2000

0:07 2 May '06

i can't move treecontrol , it always appear on the left top of the browser can you show me how to place it ?
Sign In·View Thread·Permalink	2.67/5 (3 votes)

Null Exception

amardeep dabass

19:51 1 Jan '06

When the code behind for the control executes response.write(TreeCode), it gives a nullexception because the reponse object is null. Why is this happening? Am i missing something? regards Amar
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Parent node display problem

Michael Waddell

12:41 17 Feb '05

My output does not work correctly. Parent node "B" is not showing in the initial display -- what is wrong??

Here's my code:

       With mrtree1
 
            .AddNodeDiv("Plan", .mrNodeType.mrParent, "A")
            .AddNodeDiv("Select Water Body", .mrNodeType.mrChild, "AA", "A")
            .AddNodeDiv("Which selection method", .mrNodeType.mrChild, "AAA", "AA")
            .AddNodeDiv("Select by Water Body", .mrNodeType.mrChild, "4", "AAA")
            .AddNodeDiv("Select by Pressure", .mrNodeType.mrChild, "5", "AAA")
 
            .AddNodeDiv("Do", .mrNodeType.mrParent, "B")
            .AddNodeDiv("Create PoM", .mrNodeType.mrChild, "BB", "B")
 
            .AddNodeDiv("Check", .mrNodeType.mrParent, "C")
            .AddNodeDiv("Review Status", .mrNodeType.mrChild, "CC", "C")
 
            .AddNodeDiv("Act", .mrNodeType.mrParent, "D")
            .AddNodeDiv("Add Corrective Action", .mrNodeType.mrChild, "DD", "D")
 
            .BuildTree()
        End With

Upon page load, the tree displays 3 parent nodes instead of 4. Then, when I click on the first parent node ("Plan"), it displays and extends the second parent node that was hidden ("Do") ??

michael waddell ∙ CDM, Inc. ∙ 50 Hampshire Street ∙ Cambridge, MA 02139

Treeview with database

helgapataki

5:56 22 Nov '04

Hi i was working with you code and i think that its great the problem is that im new in this world of the programing so I am wondering if your code can use with data base I hope you can help me thanks in advance Regards I'm nobody! Who are you? Are you nobody, too? Then, there's a pair of us! Don't tell! They'd advertise You know! how dreary to be somebody
Sign In·View Thread·Permalink	1.40/5 (5 votes)

PostBack

zorrer

1:55 22 Nov '04

I have 2 level tree and I want to postback the page with selected 2nd node only not from any other node level? Does any body have idea?
Sign In·View Thread·Permalink

document.all property not W3C instead

ismail codar.

6:00 7 Oct '04

Please visit: http://mozillanews.org/?article_date=2004-07-23+18-06-59
Sign In·View Thread·Permalink

I tried to use this code but it's not working in Netscape.

kishorereddy

10:27 9 Sep '04

I tried to use this code but it's not working in Netscape. Anybody tried this?If 'Yes' let me know what's the solution for this. Thanks
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Tree Control needs some tweaking.

Jeepy

12:53 30 Jun '04

The short of it:
On line 146 of mrTree.ascx.vb add this statement: prevLevl = itrNode.NodeLevel

The long of it:
When you have an excessively long branch followed by another branch with at least 2 nodes, you can end up with funky output. Depending on the length of the branch above, the bottom branch will appear prematurely starting from the leaf toward the root.

Not good. D'Oh! | :doh:

Other Issues: Dead | X|

Also, if you were planning on using the tree to describe drives and folders (like in Windows Explorer), you need to change the JavaScript event handlers that mrTree.ascx.vb writes. The handlers' string parameters that contain a folder address (i.e. C:\Program Files\I sure wish\this code was\documented better) need to have the backslash escaped for JavaScript (i.e. C:\\Program Files\\I sure wish\\this code was\\documented better).

You'll see the JavaScript event handlers in a few places in mrTree.ascx.vb:
line 155 should be changed from:

TreeCode = TreeCode + "<img style=cursor:hand src = Plus.gif id = i" + itrNode.NodeKey + " border = 0 " + "  önclick = " + Chr(34) + "javascript:NodeClick('" + itrNode.NodeKey + "','P')" + Chr(34) + ">"

To:

TreeCode = TreeCode + "<img style=cursor:hand src = Plus.gif id = i" + itrNode.NodeKey + " border = 0 " + "  önclick = " + Chr(34) + "javascript:NodeClick('" + Replace(itrNode.NodeKey, "\", "\\", , , CompareMethod.Text) + "','P')" + Chr(34) + ">"

I hope that helps!

-Jeepy

Even More Tweaking = Performance!

Jeepy

8:01 1 Jul '04

You gotta get rid of those String variables in mrTree.ascx.vb! Dead | X|

Use a System.Text.StringBuilder and your performance will increase dramatically.

Line 8 change to:
Private TreeCode As System.Text.StringBuilder

In Public Sub TreeBuild add this line after the last DIM statement:
TreeCode = New System.Text.StringBuilder()

Replace every instance of:
TreeCode = TreeCode +
With:
TreeCode.Append(

Your performace will increase tremendously!
I'm a bit amazed that a StringBuilder wasn't coded in the first place.
The code has a few string concantinations happening to the same string variable that are looped over and over again - once for each node. Bad, bad, bad! Mad | :mad:

Strings are immutable - they will hose up your performance big time. Ugh. D'Oh! | :doh:

-Jeepy

Re: Even More Tweaking = Performance!

Jeepy

13:21 7 Jul '04

Honestly, I think it's easier to code without Option Explicit and Strict On while you're doing your initial coding, but you should have it turned on as you're doing your debugging and definitely before you release your code.

Put this at the top of all your .vb pages:

Option Explicit On 

Option Strict On

Also, you should replace that (microsoft.visualbasic.)Collection object at the beginning of mrTree.ascx.vb with a System.Collections.Queue class - it runs faster. You'll have to change where you add the Node classes, but it's pretty simple... Wink | ;)

Change this:
'NodeCollection.Add(NodeData, CStr(NodeCountDiv))
To this:
NodeCollection.Enqueue(NodeData)

You'll notice that you don't need to have the second parameter in there. Hmmm | :|

Even after all this, you're probably going to want to cache the page output and have it depend on whatever variable makes sense to your particular application. The number of nodes you're adding to the tree makes a big difference in performance.

-Jeepy

Re: Even More Tweaking = Performance!

Nithing

20:38 18 Sep '08

i applied this code, but i didnt felt any difference. i think you can help me.my problem is in number of contents in a table. volume of data's in my table is very hugeee. tree code has to handle around 9000 rows. i wrote the code for display the tree in pageload. but nothing was displaying. but if level of nodes near to 5 then it will work properly. how can solve this problem?
Sign In·View Thread·Permalink

Make sure NodeKey doesn't have :\

Jeepy

8:30 22 Jun '04

Just to save some of you a little time that I didn't save... Dead | X|

Make sure when you're using the .AddNodeDiv() method that the 3rd parameter, NodeKey, doesn't include ":\" in the string. The drive variable is structured like this: "A:\", "B:\", "C:\", so you gotta trim off that ":\" Sleepy | :zzz:

So instead you'll use something like this... (take note of the "Left(drive, 1)")

Dim drives As String()
Dim drive As String

drives = System.IO.Directory.GetLogicalDrives()
For Each drive In drives
mrTree1.AddNodeDiv(drive, mrTree.mrNodeType.mrParent, Left(drive, 1))
Next

-Jeepy

Tree in DLL

oksanai@012.net.il

21:16 13 Mar '04

Help Me, please!!!
I wanted create a dll with Tree Control as was written, but I failed to do it.
With a client Web Page class I can use properties and methods of Dll.mrTree class but nothing appear on my WebPage while browsing.
I think I must register mrTree class in HTML view of WebPage, but how to do it?
Tag Prefix 'uc1" as was in example can't be used as My dll it is not a user control.
I wanted create Dll in your really fine control becouse I use C# and not VB.
So, I wanted to have compiled version of your control for including it to my C# projects.

Help me, please to solve this isure.

Regards,
Oksana

image on tree view control

sathiya888

18:36 2 Nov '03

Hi I have tree view control, in that i need to insert a small seperate image for the parent node and child node before the text. how can i insert that. please help me for that asap . with regards sathiya
Sign In·View Thread·Permalink	2.00/5 (2 votes)

Re: image on tree view control

Dustin Burke

8:17 11 Aug '05

I hope you've figured it out by now (two years later). Look in the BuildTree() function and there are three separate places you need to look but they all begin like:

TreeCode = TreeCode + "<img style=cursor:hand src = Plus.gif "....

where plus.gif could easily be swapped out. These lines just display the initial images. Javascript is used to swap the + for a - when clicked so you'll need to also change the images in the mrFunctions.js file.

I didn't like the way parents without any children had a useless toggle box next to them so I removed them in this case. Another cosmetic fix was to make sure elements in the same level are lined up correctly. I created a blank white 12x12 pixel gif image that acts as a placeholder for the elements that don't have children (where ChildExists will evaluate to false).

Length of content

Jason McBurney

9:18 13 Jun '03

Little light on the explination, no?
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: Length of content

theJazzyBrain

2:28 18 Jun '03

I agree... Cmon people!... When you write an article we expect you to explain how it works... not only how to use it!... Tell us what was good or bad about it, easy or hard, how could you extend it? Why not do it in C#? These questions are expected to be answered... not just drop a couple of numbered lines... \|---------------\| \| theJazzyBrain \| \|---------------\|
Sign In·View Thread·Permalink

Re: Length of content

Anonymous

23:29 19 Jun '03

sure...
Sign In·View Thread·Permalink	1.80/5 (2 votes)

Re: Length of content

Anonymous

2:58 18 Jun '03

Hi, Thanks for the comments. I am sorry that I was little short on the explanation. I tried to explain in the How to text file that I included in the source file. Please mail me on what part I can improve my documentation. FYI this is first time for me.
Sign In·View Thread·Permalink	2.67/5 (3 votes)