TreeView Web Server Control Overview

TreeView Web Server Control Overvie...

Switch on low bandwidth view

Collapse All

Language Filter

This page is specific to

Microsoft Visual Studio 2005/.NET Framework 2.0

Other versions are also available for the following:

ASP.NET

TreeView Web Server Control Overview

The TreeView Web server control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure. It supports the following features:

Automatic data binding, which allows the nodes of the control to be bound to hierarchical data, such as an XML document.
Site navigation support through integration with the SiteMapDataSource control.
Node text that can be displayed as either selectable text or hyperlinks.
Customizable appearance through themes, user-defined images, and styles.
Programmatic access to the TreeView object model, which allows you to dynamically create trees, populate nodes, set properties, and so on.
Node population through client-side callbacks to the server (on supported browsers).
The ability to display a check box next to each node.

TreeView Node Types

The TreeView control is made up of one or more nodes. Each entry in the tree is called a node and is represented by a TreeNode object. The following table describes the three different node types.

Node type	Description
Root	A node that has no parent node and one or more child nodes.
Parent	A node that has a parent node and one or more child nodes.
Leaf	A node that has no child nodes.

Although a typical tree has only one root node, the TreeView control allows you to add multiple root nodes to your tree structure. This is useful when you want to display item listings without displaying a single main root node, as in a list of product categories.

Each node has a Text property and a Value property. The value of the Text property is displayed in the TreeView control, while the Value property is used to store any additional data about the node, such as data passed to the postback event that is associated with the node.

When a node of the TreeView control is clicked, it can either raise a selection event (via postback) or navigate to another page. When the NavigateUrl property is not set, clicking a node will raise a SelectedNodeChanged event that can be handled to provide custom functionality. Each node also has a SelectAction property that can be used to determine specific actions that happen when the node is clicked, such as expand or collapse the node. Instead of raising a selection event to navigate to a page when a node is clicked, set the NavigateUrl property of the node to a value other than an empty string ("").

Displaying Data in the TreeView Control

The TreeView control can display several different types of data: static data that is specified declaratively in the control, data that is bound to the control, or data that is added to the TreeView control programmatically, in response to user actions.

Displaying Static Data

You can display static data in the TreeView control by creating a collection of TreeNode elements that are children of the TreeView control. These child elements are also known as child nodes.

The following example shows the markup for a TreeView control that contains three nodes, two of which have child nodes.

<asp:TreeView ID="MyTreeView" Runat="server">
  <Nodes>
    <asp:TreeNode Value="Child1" Expanded="True" Text="1">
      <asp:TreeNode Value="Grandchild1" Text="A" />
      <asp:TreeNode Value="Grandchild2" Text="B" />
    </asp:TreeNode>
    <asp:TreeNode Value="Child2" Text="2" />
    <asp:TreeNode Value="Child3" Expanded="True" Text="3">
      <asp:TreeNode Value="Grandchild1" Text="A" />
    </asp:TreeNode>
  </Nodes>
</asp:TreeView>

Bind Data to the TreeView Control

You can bind a TreeView control to a data source that supports the IHierarchicalDataSource interface, such as the XmlDataSource and SiteMapDataSource controls. Additionally, when binding data, you have complete control over which fields are populated from the data source. For more information, see Binding Data to the TreeView Web Server Control.

Displaying Data Programmatically by Using TreeNodeCollection

You can populate a TreeView control with data programmatically by accessing the Nodes property, which returns a TreeNodeCollection class. TreeNodeCollection is a strongly typed collection of TreeNode objects. Because a TreeNode object contains a property called ChildNodes that can contain TreeNode objects, the TreeNodeCollection class is a hierarchal data structure that represents all of the nodes of the TreeView control.

For an example of how to traverse the Nodes collection, see Nodes.

Populating TreeNode Data on Demand

It might not be practical to define your data structure statically, or the data might depend on information that is gathered at run time. To display data dynamically, the TreeView control supports dynamic node population. When the TreeView control is configured to populate on demand, the control raises an event when a user expands the node. The event handler retrieves the appropriate data and then populates the node that the user has clicked. To populate the TreeNode object with data on demand, set the PopulateOnDemand property of a node to true, and create a TreeNodePopulate event handler to populate the TreeNode object with data.

Client-Side TreeView Node Population

Any browser that has the SupportsCallback property set to true in the browser capabilities configuration file supports client-side node population.

Client-side node population enables the TreeView control to populate a node by calling the server's TreeNodePopulate event from client script instead of requiring a full postback to the server. For more information about client-side node population, see PopulateNodesFromClient.

Enabling Client Script

By default, on up-level browsers, the expand-collapse functionality of a node on the TreeView control is performed using client script. Using client script increases the efficiency of the rendering because the control does not have to post back to the server to render the new configuration.

Note
If client script is disabled in the browser or the browser does not support client script, then the TreeView control will revert to down-level mode and post back to the server each time a user clicks the node.

TreeView Postback

By default, the TreeView control handles expand-collapse functionality on the client unless the browser does not support client script or the EnableClientScript property is set to false. If the PopulateNodesFromClient property is set to true and the browser supports client script, then the TreeView control retrieves the data from the server without posting the entire page back.

When the TreeView control is in selection mode, each time a user clicks a node, a postback to the server occurs and the SelectedNodeChanged event is raised.

Typically, you should handle postback events when the TreeView control is in selection mode or the nodes are being dynamically populated. This is because either the PopulateOnDemand or PopulateNodesFromClient property is set to true.

TreeNode Rendering

Each TreeNode object contains four UI elements, which are shown in the following image and described in the table below.

TreeNode UI Elements

Item	Description
Expand/Collapse image	An optional image that indicates whether the node can be expanded to show child nodes. By default, this is a plus sign [+] if the node can be expanded, or a minus sign [-] if the node can be collapsed.
Check box	Check boxes can be optionally enabled, which allows users to select a particular node.
Node image	You can specify a node image to display next to the node text.
Node text	Node text is the actual text that displays on the TreeNode object. Node text can behave like a hyperlink in navigation mode, or like a button in selection mode.

In addition to its own properties, the TreeView control supports properties of the TreeNodeStyle control for each node type. These style properties override the NodeStyle property, which applies to all node types.

The TreeView also has a NodeIndent property that specifies the indentation level for all nodes. Nodes are indented from the side on which the TreeView control is rendered. This is the left side for locales that render from left to right, and it is the right side for locales that render from right to left.

A node can also have a different style applied when it is selected or when the mouse hovers over the node. When the Selected property of a node is set to true, the SelectedNodeStyle property is applied, which overrides any unselected style properties for the selected node. When the mouse hovers over a node, the HoverNodeStyle property is applied. The following image and table describe the TreeNodeStyle properties.

TreeNodeStyle Properties

Node Property	Description
NodeSpacing	Specifies the amount of vertical spacing between the entire current node and adjacent nodes above and below.
VerticalPadding	Specifies the amount of space rendered on the top and bottom of the TreeNode text.
HorizontalPadding	Specifies the amount space rendered on the left and right of the TreeNode text.
ChildNodesPadding	Specifies the amount of space above and below the child nodes of the TreeNode.
ImageUrl	Specifies the path to the image that displays next to the TreeNode.

For more information, see Customizing the Look and Feel of the TreeView Web Server Control.

Displaying a Check Box Next to a TreeView Node

Another custom rendering feature of the TreeView control is its ability to render check boxes between the node text and image by using the ShowCheckBoxes property. Showing check boxes allows the user to select multiple nodes at once, which is especially useful for interfaces like a newsgroup tree, where users can select and subscribe to multiple newsgroups at once. For more information about using check boxes, see Selection, Navigation, and Check Boxes in the TreeView Web Server Control.

Using the ExpandDepth Property

By default, the TreeView control displays all of the nodes of the tree expanded. You can configure the TreeView control to initially display to any depth. To do so, you can set the ExpandDepth property to a number reflecting the node level that you want to display. For example, if you set the ExpandDepth property to 2, then two levels of the node, or two child nodes, will display when the site initially renders on the client.

Concepts

Populating Tree Nodes in the TreeView Web Server Control
Customizing the Look and Feel of the TreeView Web Server Control
TreeView Web Server Control Events
Selection, Navigation, and Check Boxes in the TreeView Web Server Control

Tags

: treeview (x) Add a tag

Community Content

Add new content

Annotations

Examining Client-Side TreeView Objects

Will Sullivan ... ajitpratapsingh | Edit | Show History

(This tutorial assumes you have script debugging enabled in your web browser. It does not contain information on how to enable this.)

The Web TreeView control uses javascript on the client side to help control the tree. Unfortunately, this script is injected behind the scenes and is not visible in the source of the webpage. You can, however, use this simple trick to step through the injected javascript and examine the TreeView's objects during runtime. Note: You can use this technique to examine any aspnet control's javascript; I'm concentrating this on the TreeView because I have been working with it the most.

In the Page_Load event handler of the webpage that contains a TreeView, add the following (C#) code:

        Page.ClientScript.RegisterStartupScript(this.GetType(), "Debug", "Break();", true);

This injects a line of javascript into the same area that the TreeView and all other controls inject its code. Next, create the Break() method in a javascript file. Right click on your web project and select Add New Item..., select JScript File, and call this file "sneaky.js". It will then be added to the root of your web project. Open this file and add the following code:

function Break(){ alert("BREAK!");}

Set a breakpoint at this location in the js file. When this code is reached at runtime, we want to break into the execution and step through it. After this, we'll step into the code that has been injected by the webpage controls. That's where we'll want to be.

Lastly, open the webpage that has the TreeView. In the Head section, add the following line:

   <script type="text/javascript" src=sneaky.js></script>

Run your project. You will see the webpage load, then your function Break() will execute, hitting the breakpoint and stopping execution. Step through the code (F10) past the exit of the Break() function. You will step out of sneaky.js and into the aspx file for your webpage. Only now there will be a bunch of javascript code that has been injected by your webpage controls.

All data about your treeview is kept in an object that is named "[TreeView Name]_Data", where [TreeView Name] is the name you gave your TreeView. I.e., if you called your TreeView "tvNavigation", the server-side object would be called "tvNavigation_Data".

You can right-click on this object and examine it. You can use this object to control the TreeView from the client side via javascript. For instance, if you wanted to scroll the currently selected node into view, you could easily get the anchor element that represents the currently selected node via the following code:

var nodeName = Document.tvNavigation_Data.selectedNodeID.value;

var selectedNode = document.all ? document.all[nodeName] : document.getElementById(nodeName);

if(selectedNode){ /* Your scrolling code goes here */ }

A note about scrolling: The anchor node is contained in a table; if you are using the anchor's offsetTop to determine how far you have to scroll, you'll always get 0 as the result. To get the containing table element (which will have a valid offsetTop value for this purpose), add the following code after getting the anchor element and before performing any scrolling calculations:

selectedNode = selectedNode.parentNode.parentNode.parentNode.parentNode

I need to add node through javascript in tree control using ASP.net in VS2005 so that node added at client side to avoid postback during addition of node , please help me how we do that.