TreeView control

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 task pane 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.


    You can also click the TreeView control in Design view, click the arrow Cc295427.56557a2a-a4ef-4c47-906b-f64b8d530387(en-us,Expression.10).png 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 task pane. For a full description of all TreeView control properties, see TreeView 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

Node type



A node that has no parent node and one or more child nodes.


A node that has a parent node and one or more child nodes.


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.

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 itemCc295427.ceca6b3c-d5cc-48da-9bd7-fffcc486d45d(en-us,Expression.10).jpg 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 itemCc295427.b6fcf26e-e12d-4faa-ad58-a448cb5d25b0(en-us,Expression.10).jpg.

  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 siblingsCc295427.21730f68-38b2-45cd-980f-5a48feb6987d(en-us,Expression.10).jpg, Move an item down amongst its siblingsCc295427.4cfe2717-2851-4922-bb52-9c38fdda20c4(en-us,Expression.10).jpg, Make the selected item a sibling of its parentCc295427.b89d598e-1bab-4ec7-a256-e769699de3e6(en-us,Expression.10).jpg, Make the selected item the child of its preceding siblingCc295427.5d22e6e0-3cd4-4f0a-bc7d-69cd895fff90(en-us,Expression.10).jpg, or Remove an itemCc295427.27e0c529-accb-4203-a5de-1deb9142cea6(en-us,Expression.10).jpg.

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


ASP.NET navigation controls overview

Menu control

SiteMapPath control