How To Dynamically Add Nodes to a TreeView WebBrowser Control

This step-by-step article demonstrates how to add multiple levels of nodes to a Microsoft Internet ExplorerTreeView 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 theMicrosoft.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 TreeViewcontrol.
   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