What is tree view how to use in asp.net application:

What is tree view how to use in asp.net application:



  • The TreeView control is the container for displaying the parent/child relationships.
  • The TreeView control contains 1 – N tree nodes.
  • A tree node represents an element in the parent/child relationship.
  • A tree node can be the parent and/or child of other tree nodes.
  • Tree nodes that have child nodes can be expanded to display their child nodes.
  • Tree nodes that have child nodes can be collapsed to hide their child nodes.
  • Tree nodes have a property named NodeData that can be used to store meta-data.
  • Tree nodes can display images (think of Windows Explorer where an image of either a closed or open folder is displayed).


how to use in asp.net application:

Tree nodes can be hyperlinks to other web pages or sites.

What is the NodeData property?

The TreeNode class provides a property named NodeData. This property is a great place to store meta-data you may need to access either on the client or on the server.

The issue is the property’s underlying type is a string. So how do you store several pieces of meta-data in the property? Well, I’ve found the easiest way to do this is to create a delimited list of key valued pairs that can be accessed on either the client or server. I typically use a semi-colon (;) as the main delimiter and separate the key and value with an equal sign (=). For example, I would store meta-data in a tree node’s NodeData property as follows:


TreeNode tn = new TreeNode();

tn.Text = "Root Parent Node";

tn.NodeData = "Id=1000;Name=Mike Elliott;Article=ASP.NET " +
               "Tree View Control & the Client's Browser";
You can get at the NodeData property’s information on the client by accessing the element's nodeData attribute. This will allow you to obtain detail information about the tree node which the user has selected and display or submit the information as necessary. This single piece of functionality can reduce the majority of round trips or post-backs generally caused by needing meta-data associated with the node selected by the end user (this will be demonstrated later in the article).

You could choose to use XML instead of a key valued pair, but for performance reasons, I prefer to work with key valued pairs because they are stored in arrays.

Preparing to build the examples

Before jumping into examples, I want to provide a little set-up information in case you want to follow along.

The first step is to download Microsoft’s free control suite. The control suite contains more than just the TreeView; however, I am not going to cover the Tab control in this article. Once downloaded from the URL listed earlier in this article, you will have to build or run the build.bat file to produce the Microsoft.Web.UI.WebControls assembly by following the instructions in the readme file obtained in the download.

Comments