How to create treeview in asp.net (vb.net)

123ASP · Dec 4, 2003

Hi and thanks for your help.
I am trying to create something similar to the following link:

http://aalhussein.webhostme.com/q/treeview.html

Since I am new to asp.net development, I am not sure how, so I appreciate your guidance and assistance.
thanks
Al

Isadore · Dec 4, 2003

123: Have you been by

http://www.asp.net

's control section? jfrost suggested in a earlier post that they have several varieties of T-view controls (also check Microsoft). If you don't have any luck there, I have some code snippets with treeview design.

123ASP · Dec 17, 2003

hi Sadore,
I guess your code will be helpful . and thanks for your help
Al

Isadore · Dec 17, 2003

Couple of Examples:

**** Simple Tree View

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

<html>
<head><title>SimpleTreeView.aspx</title></head>
<body>
<form runat="server">

<IE:TreeView
ruant="server">

<TreeNode
Text="ASP.NET Books"> ' <-- open >

<TreeNode
Text="VB.NET Books"/> ' <-- closed />

<TreeNode
Text="ASP.NET Tips"/>

</TreeNode>
</IE:TreeView>

</form>
</body>
</html>

**** Detecting TreeView Node Selection

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

<script runat="server">

Sub TreeView_SelectedINdexChanged(s As Object, e As TreeViewSelectEventArgs)
lblSelectedNode.Text = treeBooks.GetNodeFromIndex(e.NewNode).Text
End Sub
</script>

<html>
<head><title>TreeViewSelectedIndexChanged.aspx</title></head>
<body>
<form runat="server">

<IE:TreeView
AutoPostBack="True"
OnSelectedIndexChanged="TreeView_SelectedIndexChanged"
ruant="server">

<TreeNode
Text="ASP.NET Books">

<TreeNode
Text="VB.NET Books"/>

<TreeNode
Text="ASP.NET Tips"/>

</TreeNode>
</IE:TreeView>

<p>

<asp:Label
id="lblSelectedNode"
ruant="server" />

</form>
</body>
</html>

**** Associating URL's with TreeView Nodes

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

<html>
<head><title>SimpleTreeView.aspx</title></head>
<body>
<form runat="server">

<IE:TreeView
ruant="server">

<TreeNode
Text="My favorite URLs">

<TreeNode
Text="ASP.NET Books"
NavigateURL="

http://www.myURL.com"

/>

<TreeNode
Text="VB.NET Books"
NavigateURL="

http://www.myOtherURL.com"

/>

<TreeNode
Text="ASP.NET Tips"
NavigateURL="

http://www.mytipsURL.com"

/>

</TreeNode>
</IE:TreeView>

</form>
</body>
</html>

When you select a new node in the tree view, the TreeView_SelectedIndexChanged subroutine executes. This subroutine assigns the text from the selected tree node to a Label control named lblSelectedNode.

The TreeViewSelectEventArgs paramter has two properties:

* NewNode - returns a string represneting the index of the selected node.
* OldNode - returns a string representing the index of the previous node

Notice that both the NewNode and OldNode properties return a string, not an integer. I.e., if you select the first book under the ASP.NET Books node, the NewNode property returns the string value "0.0". If you select the second child node, the property returns "0.1". The string represents the lcoation of the node in the tree view hierarchy.

In the above example, the GetNodeFromIndex method returns a TreeView node from its index. After you have the node, you can display its label by using the node's Text property.

**** Using Images with TreeNodes (e.g., folders)

<%@ Import Namespace="Microsoft.Web.UI.WebControls" %>
<%@ Register TagPrefix="IE" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>

<html>
<head><title>UsingImageswithTreeView.aspx</title></head>
<body>
<form runat="server">

<IE:TreeView
ImageURL="dir.gif"
ExpandedImageUrl="dir_open.gif"
ruant="server">

<TreeNode
Text="My favorite URLs">

<TreeNode
Text="ASP.NET Books"
NavigateURL="

http://www.myURL.com"

/>

<TreeNode
Text="VB.NET Books"
NavigateURL="

http://www.myOtherURL.com"

/>

<TreeNode
Text="ASP.NET Tips"
NavigateURL="

http://www.mytipsURL.com"

/>

</TreeNode>
</IE:TreeView>

</form>
</body>
</html>

If you want to use different images for different nodes you can use the "TreeNodeType" control. Expanding on the last example:

...

<IE:TreeView
ImageURL="dir.gif"
ExpandedImageUrl="dir_open.gif"
runat="server">

<TreeNode Type
Type="Document"
ImageUrl="text.gif"/>

<TreeNode
Text="ASP Techniques"
Type="Document"
NavigateURL="

http://myurl.com"/>

...

123: I have additional examples using checkboxes, using XML or a database, tabs, etc if you need additonal insight (all from Walther (ASP Unleashed, 2002).

Hope this helps.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to create treeview in asp.net (vb.net)

123ASP

MIS

Isadore

Technical User

123ASP

MIS

Isadore

Technical User

Similar threads

Part and Inventory Search

Sponsor