How To Dynamically Add Nodes to a TreeView WebBrowser Control by Using Visual Basic .NET

Article translations Article translations
Article ID: 319441 - View products that this article applies to.
This article was previously published under Q319441
Expand all | Collapse all

On This Page

SUMMARY

This step-by-step article demonstrates how to add multiple levels of nodes to a Microsoft Internet Explorer TreeView WebBrowser control by using a DataSet object that includes multiple tables.

This article also demonstrates three ways to optimize how much data you send and when you send the data to the client. For a small set of data, you want to send all of the data immediately. For a larger set of data, you may want to send only the root level nodes and then add only child nodes that are requested. For even larger sets of data, you may want to remove child nodes that are no longer needed.

Download Internet Explorer WebBrowser Controls

You must download the Internet Explorer WebBrowser controls to your development computer before you can use the TreeView WebBrowser control in a Web application. To download the WebBrowser controls, visit the following Microsoft Web site:
http://www.asp.net/ControlGallery/default.aspx?Category=38&tabindex=2

Add the TreeView Control to the Visual Studio .NET Toolbox

To add the TreeView WebBrowser control to the Microsoft Visual Studio .NET toolbox, follow these steps:
  1. Start Microsoft Visual Studio .NET.
  2. On the View menu, click Toolbox.
  3. Right-click the Web Forms tab in the toolbox, and then click Customize Toolbox.
    - or -

    In Visual Studio 2003 .NET:
    Right-click the Web Forms tab in the toolbox, and then click Add/Remove items.
  4. Click the .NET Framework Components tab. Notice that this tab lists at least two TreeView entries. One TreeView entry is for Windows applications such as .exe files. Another TreeView entry is the Internet Explorer WebBrowser TreeView control.
  5. View the Namespace column to identify the TreeView WebBrowser control with the Microsoft.Web.UI.WebControls namespace. Click to select the check box for this TreeView control, and then click OK.

Create the Visual Basic .NET Project and Add the TreeView Control

  1. Start Visual Studio .NET.
  2. On the File menu, point to New, and then click Project.
  3. Click Visual Basic Projects under Project Types, click ASP.NET Web Application under Templates, and then click OK.
  4. On the Project menu, click Add Web Form.
  5. In the Name box, type a name for the Web Form, and then click Open.
  6. Follow these steps to add a TreeView control to the Web Form:
    1. On the View menu, click Toolbox.
    2. Click the Web Forms tab.
    3. Locate the TreeView control. You may have to scroll through the list to locate the TreeView control.
    4. Drag the TreeView control from the toolbox to your Web Form. By default, the control is named TreeView1.
  7. Click TreeView1 on the Web Form, and then press F4 to see the Properties window.
  8. Locate the AutoPostBack property in the Properties window. Set this property according to the following guidelines:
    • Set AutoPostBack to True if you are not sending all of the data immediately (for example, if you are sending only the root nodes and particular child nodes). This option posts to the server every time the user changes the selection, expands a node, or collapses a node.
    • Set AutoPostBack to False if you are sending all of the data immediately (for example, for the sample in the Send All Data Immediately section). With this option, most activity remains on the client.

Add Code to Send Data

Send All Data Immediately

  1. Press F7 to open the code-behind window for the page.
  2. Add the following code to the top of the code-behind window, before the Public Class declaration:
    Imports System.Data
    Imports System.Data.SqlClient
    Imports Microsoft.Web.UI.WebControls
    					
  3. Replace the code in the Page_Load event with the following code:
        Private Sub Page_Load(ByVal sender As System.Object, _
                ByVal e As System.EventArgs) Handles MyBase.Load
            If Not IsPostBack Then
                ' You may have to change the ConnectionString to 
                ' access the Pubs database on your server.
                Dim strConnectionString As String = "data source=(local);" _
                        & "initial catalog=pubs;integrated security=SSPI"
                Dim strSQLAuthors As String = "SELECT authors.au_id, " _
                        & "authors.au_lname, authors.au_fname FROM " _
                        & "authors ORDER BY authors.au_lname, " _
                        & "authors.au_fname, authors.au_id"
                Dim strSQLTitles As String = "SELECT titleauthor.au_id, " _
                        & "titles.title FROM titleauthor INNER JOIN titles " _
                        & "ON titleauthor.title_id = titles.title_id " _
                        & "ORDER BY titles.title"
                Dim nodeAuthor As TreeNode
                Dim nodeTitle As TreeNode
                Dim cnn As SqlConnection
                Dim cmAuthors As SqlDataAdapter
                Dim cmTitles As SqlDataAdapter
                Dim ds As DataSet
                Dim rowAuthor As DataRow
                Dim rowTitle As DataRow
    
                'Create the Connection and the DataSet object,  
                'and then open the connection.
                cnn = New SqlConnection(strConnectionString)
                ds = New DataSet()
                cnn.Open()
    
                'Add an Authors table to the DataSet.
                cmAuthors = New SqlDataAdapter(strSQLAuthors, cnn)
                cmAuthors.Fill(ds, "Authors")
    
                'Add a Titles table to the DataSet.
                cmTitles = New SqlDataAdapter(strSQLTitles, cnn)
                cmTitles.Fill(ds, "Titles")
    
                'Create a relation between the Authors and the Titles tables.
                ds.Relations.Add("AuthorTitle", _
                        ds.Tables("Authors").Columns("au_id"), _
                        ds.Tables("Titles").Columns("au_id"))
    
                'Populate the TreeView from the DataSet.
                For Each rowAuthor In ds.Tables("Authors").Rows
                    nodeAuthor = New TreeNode()
                    nodeAuthor.Text = rowAuthor("au_lname") & ", " _
                            & rowAuthor("au_fname")
                    TreeView1.Nodes.Add(nodeAuthor)
                    For Each rowTitle In rowAuthor.GetChildRows("AuthorTitle")
                        nodeTitle = New TreeNode()
                        nodeTitle.Text = rowTitle("Title")
                        nodeAuthor.Nodes.Add(nodeTitle)
                    Next
                Next
    
                'Clean up.
                ds.Dispose()
                cmAuthors.Dispose()
                cmTitles.Dispose()
                cnn.Close()
                cnn.Dispose()
            End If
        End Sub
    					

Send Only Root Nodes and Requested Child Nodes

  1. Press F7 to open the code-behind window for the page.
  2. Add the following code to the top of the code-behind window, before the Public Class declaration:
    Imports System.Data
    Imports System.Data.SqlClient
    Imports Microsoft.Web.UI.WebControls
    					
  3. Replace the code in the Page_Load event with the following two procedures:
        Private Sub Page_Load(ByVal sender As System.Object, _
                ByVal e As System.EventArgs) Handles MyBase.Load
            If Not IsPostBack Then
                'You may have to change the ConnectionString to access the
                'Pubs database on your server.
                Dim strConnectionString As String = "data source=(local);" _
                        & "initial catalog=pubs;integrated security=SSPI"
                Dim strSQLAuthors As String = "SELECT authors.au_id, " _
                        & "authors.au_lname, authors.au_fname FROM " _
                        & "authors ORDER BY authors.au_lname, " _
                        & "authors.au_fname, authors.au_id"
                Dim nodeAuthor As TreeNode
                Dim cnn As SqlConnection
                Dim cmAuthors As SqlDataAdapter
                Dim ds As DataSet
                Dim rowAuthor As DataRow
    
                'Create the Connection object and the DataSet object, 
                'and then open the connection.
                cnn = New SqlConnection(strConnectionString)
                ds = New DataSet()
                cnn.Open()
    
                'Add an Authors table to the DataSet.
                cmAuthors = New SqlDataAdapter(strSQLAuthors, cnn)
                cmAuthors.Fill(ds, "Authors")
    
                'Populate the TreeView from the DataSet.
                For Each rowAuthor In ds.Tables("Authors").Rows
                    nodeAuthor = New TreeNode()
                    nodeAuthor.Text = rowAuthor("au_lname") & ", " _
                            & rowAuthor("au_fname")
                    nodeAuthor.NodeData = rowAuthor("au_id")
                    nodeAuthor.Expandable = ExpandableValue.CheckOnce
                    TreeView1.Nodes.Add(nodeAuthor)
                Next
    
                'Clean up.
                ds.Dispose()
                cmAuthors.Dispose()
                cnn.Close()
                cnn.Dispose()
            End If
        End Sub
    
        Private Sub TreeView1_Expand(ByVal sender As Object, ByVal e As _
                Microsoft.Web.UI.WebControls.TreeViewClickEventArgs) _
                Handles TreeView1.Expand
            Dim strConnectionString As String = "data source=(local);" _
                    & "initial catalog=pubs;integrated security=SSPI"
            Dim strSQLTitles As String
            Dim cnn As SqlConnection
            Dim cmTitles As SqlDataAdapter
            Dim ds As DataSet
            Dim rowTitle As DataRow
            Dim nodeTitle As TreeNode
            Dim nodeAuthor As TreeNode
    
            nodeAuthor = sender.nodes(e.Node.ToString)
            If nodeAuthor.Nodes.Count = 0 Then
    
                'Create the Connection object and the DataSet object, 
                'and then open the connection.
                cnn = New SqlConnection(strConnectionString)
                ds = New DataSet()
                cnn.Open()
    
                'Add a Titles table to the DataSet.
                strSQLTitles = "SELECT titles.title FROM titles " _
                        & "INNER JOIN titleauthor ON titles.title_id " _
                        & "= titleauthor.title_id where titleauthor.au_id " _
                        & "= '" & nodeAuthor.NodeData.ToString _
                        & "' ORDER BY titles.title"
                cmTitles = New SqlDataAdapter(strSQLTitles, cnn)
                cmTitles.Fill(ds, "Titles")
    
                For Each rowTitle In ds.Tables("Titles").Rows
                    nodeTitle = New TreeNode()
                    nodeTitle.Text = rowTitle("Title")
                    nodeAuthor.Nodes.Add(nodeTitle)
                Next
    
                'Clean up.
                ds.Dispose()
                cmTitles.Dispose()
                cnn.Close()
                cnn.Dispose()
            End If
        End Sub
    					

Send Only Root Nodes and Minimum Child Nodes

  1. Complete the steps in the Send Only Root Nodes and Requested Child Nodes section.
  2. Add one more procedure to the code:
        Private Sub TreeView1_Collapse(ByVal sender As Object, ByVal e As _
                Microsoft.Web.UI.WebControls.TreeViewClickEventArgs) _
                Handles TreeView1.Collapse
            Dim nodeAuthor As TreeNode
            nodeAuthor = sender.nodes(e.Node.ToString)
            If nodeAuthor.Nodes.Count > 0 Then
                nodeAuthor.Nodes.Clear()
                nodeAuthor.Expandable = ExpandableValue.Always
            End If
        End Sub
    					

REFERENCES

For additional information, click the article number below to view the article in the Microsoft Knowledge Base:
306154 How To Display Hierarchical Data by Using Nested Repeater Controls and Visual C# .NET
For more information, visit the following MSDN Web sites:
About the TreeView WebControl
http://msdn.microsoft.com/en-us/library/ms529261.aspx

Internet Explorer WebControls Reference
http://msdn.microsoft.com/en-us/library/ms528669(VS.85).aspx

Adding a Relationship between Tables
http://msdn.microsoft.com/en-us/library/ay82azad(VS.71).aspx

Navigating a Relationship between Tables
http://msdn.microsoft.com/en-us/library/d6s958d6(VS.71).aspx

Properties

Article ID: 319441 - Last Review: April 21, 2006 - Revision: 4.5
APPLIES TO
  • Microsoft ASP.NET 1.0
  • Microsoft Visual Basic .NET 2002 Standard Edition
  • Microsoft ASP.NET 1.1
  • Microsoft Visual Basic .NET 2003 Standard Edition
Keywords: 
kbhowtomaster kbservercontrols KB319441

Give Feedback

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com