Treeview in Asp.net


This article explains about how you can build a working Tree View control developing an XML file as its data source. In addition to this, I have given the database data-driven approach in the following example of using an XML file. To comprehend this approach, you should be familiar with Visual Studio, Sql Server and XML.

Introlduction


The TreeView Control is included in Internet Explorer Web controls Download Set. The Web Control set also includes the MultiPage Web Control (for creating Page Collection), a Tab Strip Web Control (for tab menus like in Windows application), and the Toolbar Web Control (used to create tool bar strips of control buttons). These tools give ASP.NET developers the ability to create Web-based applications that look, feel, and behave like traditional Windows desktop applications. All the controls include automatic browser detection so your pages will render and function in all commonly used browsers. The Internet Explorer Web Controls are not part of the .NET Framework and must be downloaded separately.


Application Requirements


First Let me explain How to use IE Tree view control in asp.net 1.1 application
First you have to install IE web controls. Download from msdn site(http://msdn.microsoft.com/downloads/samples/internet/asp_dot_net_servercontrols/webcontrols/default.asp. ) and the compile it according to given instruction given below.

Downloading and Installing the WebControls Set


1. Double click the saved IEWebControls.exe file then the InstallShield setup will appear. You must have the .NET Framework loaded on your machine prior to installing the Web Controls.
2. Browse to your C:\Program Files\IE Web Controls folder and open the file "build.bat" in an editor. Modify the line with "csc.exe" in it to include the full path to your DOT.NET Framework, for example: "c:\winnt\microsoft.net\framework\v1.1.4322\csc.exe"
3. Double click or execute the build .bat file we just modified.
4. Check the newly created "C:\Program Files\IE Web Controls\Build" folder for the file "Micorosoft.Web.UI.WebControls.dll". If it doesn't exist, double check step three.
5. Follow the remaining steps in the C:\Program Files\IE Web Controls\Readme.txt file for directions on creating and coping file to your IIS directory.
6. For Visual Studio users: Add the Web Controls to the Visual Studio toolbox by selecting Tools, Add/Remove Tool Box Items from the menu. Then browse to the location of your "Micorosoft.Web.UI.WebControls.dll".

Create a new asp.net project paste this file in bin directory. Go to add remove controls on control panel and add this dll. You will found four new controls in the control panel ,drag the tree view control on the webform.

Add the TreeView Control to the Visual Studio .NET Toolbox
To add the TreeView Web Browser 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.

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 atleast two Tree View entries. One Tree View entry is for Windows applications such as .exe files. Another Tree View entry is the Internet Explorer Web Browser TreeView control.
If you couldn't find the dll. Browse the dll in which it has installed. Suppose if it is in
C:\Program Files\IE Web Controls\build.
5. View the Namespace column to identify the TreeView Web Browser control with the Microsoft.Web.UI.WebControls namespace. Click to select the check box for this Tree View control, and then click OK.




Sample Application


Consider my application containing an xml file , Treeview.xml. The application will create the Parent Child structure of our tree. It contains three child Filed Nodes ID, Description and Target ID. The Target ID implies that the current node is the child node of that pointed node. Create the following XMl file called Treeview.Xml and save it in C directory or wherever you want but you have to specify the correct path in Coding.

<?xml version="1.0" standalone="yes"?>
<Root>
<column>
<ID> 1</ID>
<Description> Parent1</Description>
<TargetID> 0</TargetID>
</column>
<column>
<ID> 2</ID>
<Description> Child1</Description>
<TargetID> 1</TargetID>
</column>
<column>
<ID> 3</ID>
<Description> SubChild</Description>
<TargetID> 2</TargetID>
</column>
<column>
<ID> 4</ID>
<Description> Child2</Description>
<TargetID> 1</TargetID>
</column>
<column>
<ID> 5</ID>
<Description> SubChild2</Description>
<TargetID> 4</TargetID>
</column>
<column>
<ID> 6</ID>
<Description> Parent2</Description>
<TargetID> 0</TargetID>
</column>
<column>
<ID> 7</ID>
<Description> Parent3</Description>
<TargetID> 0</TargetID>
</column>
<column>
<ID> 8</ID>
<Description> Parent4</Description>
<TargetID> 0</TargetID>
</column>
<column>
<ID> 9</ID>
<Description> SubGrandChild</Description>
<TargetID> 5</TargetID>
</column>

</Root>


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
After Creating the Treeview Menu to the Page.. Add the following code in Page_Load Event

Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
If Not IsPostBack Then


Dim node As TreeNode
Dim node1 As TreeNode
Dim ds As DataSet
Dim rowAuthor As DataRow

ds = New DataSet
Dim str As String
‘Load XMl File
str = "C:\Treeview_Test.xml"
ds.ReadXml(str, XmlReadMode.Auto)
Dim dt As New DataTable
dt = ds.Tables(0)

'Populate the TreeView from the DataSet.
For Each rowAuthor In ds.Tables(0).Rows
If rowAuthor(2) = 0 Then
node = New TreeNode
node.Text = rowAuthor("Description")
node.NodeData = rowAuthor("id")
ChildNodes(node, dt)
node.Expandable = ExpandableValue.CheckOnce

TreeView1.Nodes.Add(node)
End If
Next

'Clean up.
ds.Dispose()
End If
End Sub
‘For Tree Expanding and Collapsing add the following code
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=av;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

Dim str As String
str = "C:\Treeview_Test.xml"
ds.ReadXml(str, XmlReadMode.Auto)
Dim dt As New DataTable
dt = ds.Tables(0)


For Each rowTitle In ds.Tables(0).Rows

nodeTitle = New TreeNode
nodeTitle.Text = rowTitle("Description")
nodeAuthor.Nodes.Add(nodeTitle)

Next
'Clean up.
ds.Dispose()
cmTitles.Dispose()
cnn.Close()
cnn.Dispose()
End If
End Sub
Private Sub ChildNodes(ByRef menuNode As TreeNode, ByRef _dtTemp As DataTable)

Dim subNode As TreeNode
Dim rowAuthor As DataRow
Dim strBuild As StringBuilder


For Each rowAuthor In _dtTemp.Rows
If rowAuthor(2) = menuNode.NodeData Then
subNode = New TreeNode
subNode.Text = rowAuthor("Description")
subNode.NodeData = rowAuthor("id")
menuNode.Nodes.Add(subNode)
ChildNodes(subNode, _dtTemp)
End If
Next

End Sub

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


Comments

No responses found. Be the first to comment...


  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: