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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How can you Databind an ASP 2.0 Treeview Control to Database data for use as a Menu..

Controls

How can you Databind an ASP 2.0 Treeview Control to Database data for use as a Menu..

by  NoCoolHandle  Posted    (Edited  )
The treeview control is one of Asp 2.0 best new additions. It allows you to construct truly nice menu's with expand/contract capacity and allows for custom images and supports a number of nice built-in themes.

It's strength (and weakness) is that it uses Hierarchal Data. This means that it is very easy to just bind it to an XML file (via an XMLDatasource object) and display complex menus.

However it becomes less obvious as to how you can use it with a dynamic datasource like a query.

The issue revolves around how to create usable hierarchal data to bind it to.

The trick is to use a dataasets DataRelation object. and then to bind each level of the treeview to the correct datatable.

The more levels of menu you need the more datatables you will need.

The following example shows how to use 2 querys to display all the products in the northwind database by category..

(this code was adapted from information in the Whidbey help files. For more help search on "Introducing the ASP.NET 2.0 TreeView and Menu Controls" by Stephen Walther)

[red](beware of line wrapping}[/red]
Code: 
<%@ Page Language="VB" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>

<script runat="server">

    Const connectionString As String = _
      "Server=localhost;Integrated Security=True;Database=Northwind"
    
    Sub Page_Load()
        if NOT IsPostBack Then
            PopulateNodes()
        End If
    End Sub

    Sub PopulateNodes()
        Dim dst As DataSet = GetTreeViewData()
        for each masterRow As DataRow in dst.Tables("Categories").Rows
            Dim masterNode As New TreeNode(masterRow("CategoryName").ToString())
            masterNode.NavigateUrl = ("Default2.aspx?src=" & masterRow("CategoryName").ToString())
            TreeView1.Nodes.Add(masterNode)
            for each childRow As DataRow in _
              masterRow.GetChildRows("Children")
                Dim childNode As New TreeNode(childRow("ProductName").ToString())
                childNode.NavigateUrl = ("Default2.aspx?src=" & childRow("ProductName").ToString())
                masterNode.ChildNodes.Add(childNode)
            next
        Next
    End Sub   
        
    Function GetTreeViewData() As DataSet
        Dim con As SqlConnection = new SqlConnection(connectionString)
        Dim dadCats As SqlDataAdapter = new _
          SqlDataAdapter("SELECT * FROM Categories", con)
        Dim dadProducts As SqlDataAdapter = new _
          SqlDataAdapter("SELECT * FROM Products", con)
        Dim dst As DataSet = new DataSet()
        dadCats.Fill(dst, "Categories")
        dadProducts.Fill(dst, "Products")
        dst.Relations.Add("Children", _
            dst.Tables("Categories").Columns("CategoryID"), dst.Tables("Products").Columns("CategoryID"))
        return dst
    End Function
    
</script>

<html>
<head>
    <title>Master/Detail TreeView</title>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:TreeView
        ID="TreeView1"
        Runat="Server" 
        ShowExpandCollapse=true
        ImageSet=Faq
         ExpandDepth=0
        />
       To modify the look of the control try editing the "ImageSet" property of the treeview control...<br><br>
You can also use the imageUrl attribute of the node to provide custom images for the treeview..
 
    </form>
</body>
</html>
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top