Multimedia Designs .NET

ASP.NET TreeView Control:

Treeview controls are another way to provide a list but most commonly to provide a list in a way similar to a folder structure on your computer. The first item is called the parent node and each node under this is a child node. Each level that leads deeper into the list in a child of the preceeding node. Treeviews can display data that you manually type into the control using the edit properties dialog box or you can set the datasource to read from an xml file, like the web.sitemap or even read from your web server's directory and display a list of folders and files.

Once you define the datasource you can then edit the property of each node that when selected does one or more things. If you set the NavigateURL property to link to a web page then you can't program the select method and visa versa.

Treeview with manually typed data.

Below is a link to a web page that contains two treeviews, one on the right side of the page and one on the left side of the page. Both of these treeviews were manually created setting the NavigateURL property to go to a web page when a particular node is selected.

View an example of treeviews being used on a web page.

View an example of treeviews being used on a this website.

Treeview that reads the FileDirectory

You can set up your treeview to get its parent node from a particular path to a folder on your web server and display the folders as notes. For this example I did not include the file names to be displayed in the treeview but instead set them up to display in a datalist control on the right side of the page. I then also programmed for those files to become hyperlinks so that when clicked you are navigated to the path of the .pdf file which then opens in your browser.

View an example of a treeview that creates its nodes from a FileDirectory path on the web server.

Treeview that reads the web.sitemap XML file

Here are the steps to perform to link your treeview to your web.sitemap

This will automatically pull the information from your web.sitemap file and place it in your treeview.

 

NOTE: In properties, edit Exapand Depth = 0 if you want your tree to display on the page showing only the top nodes. Users will need to click one of these top folders in order to "drill down" into the tree.