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

This article was previously published under Q319441
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:

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.DataImports System.Data.SqlClientImports 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.DataImports System.Data.SqlClientImports 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:
list hierarchy hierarchical nested
Properties

Article ID: 319441 - Last Review: 04/21/2006 07:21:40 - Revision: 4.5

Microsoft ASP.NET 1.0, Microsoft Visual Basic .NET 2002 Standard Edition, Microsoft ASP.NET 1.1, Microsoft Visual Basic .NET 2003 Standard Edition

  • kbhowtomaster kbservercontrols KB319441
Feedback