TreeView

The TreeView control is used to display hierarchical data, such as a table of contents or file directory, in a tree structure.

To add a TreeView control to a page

• Drag the TreeView control from the Toolbox panel to your page.

To apply basic formatting schemes to the TreeView control

1. In Design view, right-click the TreeView control, and then click Show Common Control Tasks.

   Note

   You can also click the TreeView control in Design view, click the arrow  in the upper-right corner to show the Common TreeView Tasks menu. Click the arrow again to hide the menu.

2. On the Common TreeView Tasks menu, click AutoFormat.

3. In the AutoFormat dialog box, select one of the schemes in the Select a scheme list. The effect of the scheme on your TreeView control is displayed in the Preview area.

4. Click OK to apply the formatting scheme and close the dialog, or Apply to apply the formatting scheme without closing the dialog.

As is the case with all ASP.NET controls, you can designate appearance and behavior by setting properties in the Tag Properties panel. For a full description of all TreeView control properties, see TreeView Members  in the MSDN library.

TreeView node types

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

TreeView control node types

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.

To define nodes for the TreeView control

1. In Design view, right-click the TreeView control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, click Edit Nodes.

3. In the TreeView Node Editor dialog box, click Add a root item  to add an item.

4. In the Properties area, set the Text and href properties—and any other properties you want to set for the node.

5. Add additional root items or add child items to the selected item by clicking Add a child item .

6. When you have added several menu items, you can adjust their order and indention by selecting an item and clicking Move the item up amongst its siblings , Move an item down amongst its siblings , Make the selected item a sibling of its parent , Make the selected item the child of its preceding sibling , or Remove an item .

You can bind a TreeView control to the XmlDataSource and SiteMapDataSource. 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  in the MSDN library.

To bind the TreeView control to a data source

1. In Design view, right-click the TreeView control, and then click Show Common Control Tasks.

2. On the Common DropDownList Tasks menu, select an existing data source or <New data source> in the Choose Data Source dropdown.

3. If you choose <New data source>, the Configure a data source by using a data bound control opens. Click Site Map or XML File in the Where will the application get data from? box and give the data source an ID in the Specify an ID for the data source box.

4. If you choose XML File, in the Configure Data Source dialog box, specify the XML file in the Data file box and, optionally, an XSL transform file or XPath expression for the XML data source.

5. Click OK in the dialog box and wizard to get back to the control in Design view.

6. Right-click the control and click Edit TreeViewItem Databindings on the shortcut menu.

7. In the Available data bindings list, select an XML field to which you want to bind the menu and click Add.

8. Select the field in the Selected data bindings list and set property values in the Data binding properties area. For example, to specify what text is displayed in the menu, choose #InnerText in the TextField property dropdown to display the text between the XML element start and end tags.

See also

Concepts

ASP.NET Navigation controls
Menu
SiteMapPath

Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.