Click here to Skip to main content

Article

ASP.NET Tree Control

Murthy Rojukhirdu

Rate me:

2.69/5 (25 votes)

12 Jun 20031 min read

187.4K

5.4K

42

21

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

Written By

Murthy Rojukhirdu

Web Developer

United States

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

qbak2228-Jun-07 11:32

28-Jun-07 11:32

Is there licensing attached to this code?

Also how do you move the tree structure?

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

Yasotha Devi24-Oct-06 20:26

24-Oct-06 20:26

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

i can't move tree

Centurion20002-May-06 0:07

2-May-06 0:07

i can't move treecontrol , it always appear on the left top of the browser

can you show me how to place it ?

amardeep dabass1-Jan-06 19:51

amardeep dabass

1-Jan-06 19:51

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

Parent node display problem

Michael Waddell17-Feb-05 12:41

Michael Waddell

17-Feb-05 12:41

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

Helga Pataki22-Nov-04 5:56

22-Nov-04 5:56

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

zorrer22-Nov-04 1:55

22-Nov-04 1:55

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? Confused | :confused:

Confused | :confused:

Blush | :O

Roll eyes | :rolleyes:

document.all property not W3C instead

İsmail Codar7-Oct-04 6:00

7-Oct-04 6:00

Please visit:
http://mozillanews.org/?article_date=2004-07-23+18-06-59

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

kishorereddy9-Sep-04 10:27

9-Sep-04 10:27

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

Tree Control needs some tweaking.

Jeepy30-Jun-04 12:53

30-Jun-04 12:53

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:

D'Oh! | :doh:

Other Issues: Dead | X|

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 " + " onclick = " + 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 " + " onclick = " + Chr(34) + "javascript:NodeClick('" + Replace(itrNode.NodeKey, "\", "\\", , , CompareMethod.Text) + "','P')" + Chr(34) + ">"

I hope that helps!

-Jeepy

Even More Tweaking = Performance!

Jeepy1-Jul-04 8:01

1-Jul-04 8:01

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

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:

Mad | :mad:

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

D'Oh! | :doh:

-Jeepy

Re: Even More Tweaking = Performance!

Jeepy7-Jul-04 13:21

7-Jul-04 13:21

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 <br />
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 | ;)

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 | :|

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!

Nithing18-Sep-08 20:38

18-Sep-08 20:38

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?

Make sure NodeKey doesn't have :\

Jeepy22-Jun-04 8:30

22-Jun-04 8:30

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

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:

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

Member 93995813-Mar-04 21:16

13-Mar-04 21:16

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

sathiya8882-Nov-03 18:36

2-Nov-03 18:36

Hi

Wink | ;)

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 Poke tongue | ;-P

Poke tongue | ;-P

.

with regards
sathiya

Re: image on tree view control

Dustin Burke11-Aug-05 8:17

11-Aug-05 8:17

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 + "

Length of content

Jason McBurney13-Jun-03 9:18

13-Jun-03 9:18

Little light on the explination, no?

Re: Length of content

theJazzyBrain18-Jun-03 2:28

18-Jun-03 2:28

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... Confused | :confused:

Confused | :confused:

Confused | :confused:

Confused | :confused:

Confused | :confused:

Confused | :confused:

|---------------|
| theJazzyBrain |
|---------------|

Re: Length of content

Anonymous19-Jun-03 23:29

19-Jun-03 23:29

sure...

Re: Length of content

Anonymous18-Jun-03 2:58

18-Jun-03 2:58

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.

General News Suggestion Question Bug Answer Joke Praise Rant Admin

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

Go to top