Hi

One of the cool new controls of the asp.net 2.0 is the tree view control. But there is no direct support in the treeview control to populate hierarchical data on the fly from the datasource. In this post I will talk about populating hierarchical data from the database to be shown in the treeview.

For the Example purpose lets say we have a table with hierarchical data. The table has three fields Cat_id, Name and ParentID. The parentId references the Cat_id to make the data hierarchical. On how to retirieve hierarchical data check my previous post.

First define a treeview control in the page like below

<asp:TreeView 

  ID="TreeView1"

  ExpandDepth="0"

  PopulateNodesFromClient="true"

  ShowLines="true"

  ShowExpandCollapse="true"

  runat="server" />

Here we are setting the initial expand depth of the treeview to 0. we will populate the data from the server as and when required by using the client-side node populating feature. This will make better user experience. Using this method will not make unnecessary postback for each record.

Now to populate the data we will have to write some code. In the p[age load inside the  Not IsPostback block call the RootLevel() Function.  The root level function is something like this

Private Sub RootLevel()

  Dim objConn As New SqlConnection( "connstr")

  Dim objCommand As New SqlCommand("select cat_id, Name,(select count(*) FROM SampleCategories " _

    & "WHERE parentid=sc.Cat_id) childnodecount FROM SampleCategories sc where parentID IS NULL", _

    objConn)

  Dim da As New SqlDataAdapter(objCommand)

  Dim dt As New DataTable()

  da.Fill(dt)

  PopulateNodes(dt, TreeView1.Nodes)

End Sub

Private Sub PopulateNodes(ByVal dt As DataTable, _

  ByVal nodes As TreeNodeCollection)

  For Each dr As DataRow In dt.Rows

    Dim tn As New TreeNode()

    tn.Text = dr("Name").ToString()

    tn.Value = dr("id").ToString()

    nodes.Add(tn)

    ' enable on-demand populating if node has child records

    tn.PopulateOnDemand = (CInt(dr("childnodecount")) > 0)

  Next

End Sub

Private Sub PopulateSubLevel(ByVal parentid As Integer, _

  ByVal parentNode As TreeNode)

  Dim objConn As New SqlConnection("connstr")

  Dim objCommand As New SqlCommand("select Cat_id, Name,(select count(*) FROM SampleCategories " _

    & "WHERE parentid=sc.Cat_id) childnodecount FROM SampleCategories sc where parentID=@parentID", _

    objConn)

  objCommand.Parameters.Add("@parentID", SqlDbType.Int).Value = parentid

  Dim da As New SqlDataAdapter(objCommand)

  Dim dt As New DataTable()

  da.Fill(dt)

  PopulateNodes(dt, parentNode.ChildNodes)

End Sub

‘This event is called when the user clicks to get additional data.

Protected Sub TreeView1_TreeNodePopulate(ByVal sender As Object, _

  ByVal e As System.Web.UI.WebControls.TreeNodeEventArgs) Handles TreeView1.TreeNodePopulate

  PopulateSubLevel(CInt(e.Node.Value), e.Node)

End Sub

TreeNodePopulate is raised for a TreeNode which is expanded by the user for the first time. Due to PopulateNodesFromClient (TreeView) and PopulateOnDemand (TreeNode) settings, this happens with the client-side callback mechanism which is handled by the ASP.NET Page framework.

The PopulateNodes method iterates through all rows in the DataTable, and if the given node has child nodes, it sets the PopulateOnDemand property of the TreeNode object according to that. This has the effect that the expand/collapse icon is shown if the node has child nodes.

Hope this helps
Thanks
Vikram