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


The information in this article applies to:

  • Microsoft ASP.NET (included with the .NET Framework) 1.0
  • Microsoft Visual Basic .NET (2002)
  • Microsoft ASP.NET (included with the .NET Framework 1.1)
  • Microsoft Visual Basic .NET (2003)
This article was previously published under Q319441
For a Microsoft Visual C# .NET version of this article, see 320909.

IN THIS TASK

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.

back to the top

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

back to the top

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.
back to the top

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.
back to the top

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
back to the top

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
back to the top

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
back to the top

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/library/default.asp?url=/workshop/webcontrols/overview/treeview.asp

Internet Explorer WebControls Reference
http://msdn.microsoft.com/workshop/webcontrols/webcontrols_entry.asp

Adding a Relationship between Tables
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconaddingrelationshipbetweentwotables.asp

Navigating a Relationship between Tables
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconnavigatingrelationshipbetweentwotables.asp

back to the top
Modification Type:MajorLast Reviewed:4/21/2006
Keywords:kbHOWTOmaster kbServerControls KB319441 kbAudDeveloper
©2004 Microsoft Corporation. All rights reserved.