Using the TreeView Designer in Visual Studio .NET

Article
10/23/2013

The Windows Internet Explorer WebControls are a collection of custom ASP.NET controls that simplify the development of popular UI elements in Web Forms. Web Forms can be authored and programmed with by editing pages manually. However, using the WebControls designers, UI also can be authored visually using the design-mode in Visual Studio .NET.

This article explains how to install the WebControls in Visual Studio .NET and covers some of the basic procedures for authoring in design-time with the WebControls.

This document includes the following sections.

Prerequisites
Platform and Software Requirements
Terminology
Setup
Creating a Simple TreeView
Related Topics

Prerequisites

To make the best use of this article, you should be familiar with the basic types of ASP.NET controls and know how to use them to author a simple Web Forms page.

Using the TreeView designer in Visual Studio .NET is an easy way to author with the WebControls. You don't have to be familiar with any of the common language runtime programming languages in order to build a TreeView UI interactively.

Platform and Software Requirements

The WebControls must be installed on your computer before you can author Web Forms using them. To install the WebControls, your Web server must be running ASP.NET. ASP.NET is installed automatically as a part of the setup of either the .NET Framework SDK or Visual Studio .NET products.

In order to follow through the procedures given in the tutorials of this article, your computer must be running Visual Studio .NET with the WebControls installed.

Terminology

This section defines the terminology used in this article.

Web Forms The ASP.NET Web Forms Page Framework is a scalable common language runtime programming model that can be used to dynamically generate web pages. ASP.NET Web Form Pages are text files with a .aspx filename extension. When a client application, or browser, requests a .aspx file, ASP.NET runtime parses and compiles the file into a .NET Framework class and the output is sent to the browser.

design view In Visual Studio .NET certain items in a project can be edited in a "what you see is what you get" (WYSIWYG) environment, as an alternative to manually editing source code in the HTML Designer. The visual mode of editing Web pages is called design view. The WebControls support manual editing of the source code in a Web Form page, and they also support design view in the Visual Studio .NET IDE.

Setup

Creating a Simple TreeView

This section walks through the steps to create a simple TreeView using the design-mode in Visual Studio .NET.

Start Microsoft Visual Studio .NET.
Create a new project.

This can be done by selecting New from the File menu. After you have selected the menu option to create the new project, Visual Studio .NET will prompt for the type of project and other information.

Select Visual C# Projects from the Project Types panel and select Web Application from the Templates panel. Accept the default name of the application and click the OK button; Visual Studio .NET will create the Web application.
Create a new Web Form.

Select Add New Item from the File menu. Select the Web Form icon from the Templates panel and name the file tree1.aspx. Finally, click the Open button to create and open the new page.
Select design view.

To select design view, click the Design tag at the bottom of the HTML Designer window. Either GridLayout or FlowLayout mode can be used in design view, to arrange the layout of controls on the page.
Add a TreeView WebControl.

Open the Toolbox and select the General tab. The TreeView should be visible on this panel, along with the designers for the other WebControls.

Add a TreeView to the Web Form by dragging the TreeView from the Toolbox panel onto the page.

If the control was added to the page correctly, the design view should appear similar to the following image.

Note If the WebControls designers do not appear in the Toolbox, they may not have been installed. Another possibility is that they have not yet been added to the Toolbox. When editing a Web Form, if design view is not selected, the design-time controls for the WebControls do not appear in the Toolbox.
Locate the Properties panel.

Ensure that the Properties panel is visible in the Visual Studio .NET IDE. If the Properties panel is not open, it can be activated by pressing the F4 key.

Select the TreeView control by clicking it; when it is selected, its resizing handles are activated. When the TreeView control is selected, the Properties panel synchronizes with the selection and renders the properties for TreeView1.

Several different views of the Properties panel can be selected. Each view type is selected by clicking the icons at the top-left corner of the panel. Select the Categorized view, which arranges the properties of the TreeView by category.

Scroll down the Properties panel to the Data properties. The Data properties relate directly to data islands, data binding, and items of data rendered by the TreeView.
Open the TreeNode editor.

The collection of nodes in a TreeView can be edited by opening the Nodes in the Properties panel.

Click anywhere in the Nodes field, and a button will appear at the end of the data entry field. This button opens an editor that enables the nodes in the TreeView to be edited. Click the button to open the TreeNode editor.
Edit the root node.

A root node is created by default when a TreeView is added to a Web Form.

Select the root node so that it is highlighted in the editor.

Click the mouse in the Text property field for the root nodes properties and enter the value My first Tree Node. Press the ENTER key to complete the data entry and see the rendering of the tree update.
Add a TreeNode.

Another node can easily be added to the TreeView at this point. Two possibilities exist: one is to add another root node below the first one; the second option is to add a child node to the root node.

Click the Add Child button to add a child TreeNode of the root node. The TreeNode editor applies the default text, Node1, to the new node.

Select the Text property field for the new node and enter the value My second Tree Node. Press enter to update the rendering of the tree.

Click OK to close the editor.

Save the Web Form to preserve the updates.
Render the page.

Right-click anywhere on the Web Form and select View in Browser. The page will render in the browser.

The following image shows a rendering of the initial state of the TreeView.

The TreeView renders the root node, and it has a graphic that indicates it is expandable. The node can be expanded or collapsed by clicking on it.

Note This sample illustrates that the default state of a node in a TreeView is collapsed. The initial state of node can be controlled by setting its EXPANDED property.