 |
 |
 |
|
 |
|
 |
|
 |
|
 |
|
 |
 |
|
|
|
 |
 |
||
|
In Part 1 we went over the basics of the treeview web control and some of its style properties. In this article we will go over dynamically creating expandable trees. First, we are going to work with a static XML document then we will move onto creating XML with ASP.net.
You should have a basic knowledge of the treeview web control. If you are not familiar with this web control, you should read Part 1.
We are going to start out with a blank treeview and populate it using XML. Here is the start of our page.
<%@ Register TagPrefix="mytree" Namespace="Microsoft.Web.UI.WebControls"
Assembly="Microsoft.Web.UI.WebControls, Version=1.0.2.116, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
%>
<%@ import namespace="Microsoft.Web.UI.WebControls" %>
<form runat="server">
<mytree:treeview runat="server" id="oTree" treenodesrc="aspsites.XML" ChildType="Folder"
/>
</form>
First we register our tag and import the webcontrols namespace. Next we have our empty treeview with the property treenodesrc set to our XML file. You need to make sure that the aspnet user has access to this file or the page will generate an exception. When our page loads the treeview control will look for the aspsites.XML file to populate with. Next, we are going to look at our XML file.
<?xml version="1.0" encoding="utf-8" ?>
<TREENODES>
<treenode text="ASP.Net Sites" ChildType="Link">
<treenode text="ASP Alliance" navigateurl="http://www.aspalliance.com" />
<treenode text="4GuysFromRolla" navigateurl="http://www.4guysfromrolla.com" />
<treenode text="DotNetJunkies" navigateurl="http://www.navigateurl.com" />
</treenode>
<treenode text="Sql Server Sites" ChildType="Link">
<treenode text="Swynk" navigateurl="http://www.swynk.com" />
<treenode text="Sql-Server-Performance.com" navigateurl="http://www.sql-server-performance.com"
/>
</treenode>
</TREENODES>
First we include our XML header, so that the treeview recognizes that this file is indeed an XML file. Then we use the tag <TREENODES>, this tag must be in all uppercase and should contain all of the treenodes that you want to appear. Then we use the treenode tag to create our individual nodes.
All properties that are valid when declaring nodes in the treeview are valid in the XML file. We set the text property as well as the navigate url property of each node. Note that we are also setting ChildType for our two top nodes, but the tree is still plain. To create our treenodetypes that correspond to the ChildTypes we must create a separate XML file. Below is our modified treeview statement to include our treenodetype XML file.
<form runat="server">
<form runat="server">
<mytree:treeview runat="server" id="oTree" treenodesrc="aspsites.XML" treenodetypesrc="aspsitestype.XML"
ChildType="Folder" />
</form>
We set the property treenodetypesrc to the location of our treenodetype XML file. On the loading of our page the treeview will look to this XML file to supply the different treenode types. Below is the content of aspsitetypes.XML
<?xml version="1.0" encoding="utf-8" ?>
<TREENODETYPES>
<treenodetype Type="Folder" ExpandedImageUrl="images/openfolder.gif" ImageUrl="images/closedfolder.gif"
/>
<treenodetype Type="Link" ImageUrl="images/link.gif" />
</TREENODETYPES>
Our treeview uses the treenodetypes specified and our tree is much more stylish!
Even though we are using XML to generate this tree, it is still static XML. So let's move on to creating our XML dynamically according to the users selection. First thing we are going to do is create a quick interface where the user can choose to view either asp related or sql related sites. Using the dropdown control we will give the user both of these options to choose from.
<asp:DropDownList id="ddlSites" runat="server"
autopostback="true" onselectedindexchanged="ddlSites_OnChange">
<asp:ListItem value="0" Text="Selected" />
<asp:ListItem Value="asp" Text="ASP.net related sites"/>
<asp:ListItem Value="sql" Text="SQL related sites"/>
</asp:DropDownList>
We set the autopostback to true so that when the user makes a selection the data will be sent back to the server so we can create the tree. We also set the onselectedindexchanged event handler to ddlSites_OnChange , which can be seen below:
| C# | VB |
<script runat="server">
|
First we set the TreeNodeSrc with the value of the dropdown box. Notice that we are going to be using the querystring to send this data to the aspsites.aspx file. The aspsites.aspx file will use this querystring information to create a custom XML file to populate our tree. After setting the treenodesrc we call the databind method of the treeview, which will create the trees based on the supplied XML. Now lets look at the aspsites.aspx page that is creating our XML:
| C# | VB |
<%@ Page Language="C#" %>
|
What we are doing with this file is reading the querystring and then outputting the
corresponding XML. In this example we use switch or case to determine which XML should
be created, but in your application you may want to pull information from sql server
or another source to create the nodes. After creating a file like this be sure to
double check the output of the file to make sure it is generating correct XML and
does not have any traces of html or asp.net left in it.
When you select an option in the dropdownlist the page posts back and appends the
value of that option to the querystring of the aspsites.aspx file which takes that
querystring and then generates XML which is used to create the treenodes.
Have Fun!