How to use the. NET TreeView control

Source: Internet
Author: User
Tags define definition contains copy end net opening and closing tags visual studio
treeview| control ASP. NET's really useful feature is its scalability. Developers around the world can create their own custom controls that can be easily defined in your own process. The Internet Explorer Web controls is a collection created by Microsoft outside of the standard asp.net control.

The drives in Windows Explorer and the files and folders under them are arranged according to a hierarchy in which a TreeView control provides us with a way to display information in a hierarchical structure. The TreeView control contains a list of some entries that are called nodes. Each node can have its own set of nodes, which provides a deeper definition of the data. Each node can be folded to allow visitors to look in a TreeView control, looking only at the level of data that he is interested in. Just like the Windows Resource Manager.

The first thing to be clear is that the test environment, as long as the environment is correct, the next work is easy:

To test the control, there must be a file called IE WebControls, the specific files can be downloaded here or to Microsoft's website to download: Download the address

Install it according to the method he provided. If you are not clear, please take a closer look at his readme document.

Here, skip the download method and go directly to the configuration of the environment:
IE Web Controls
1, double-click Installation Complete, the default: System disk: \program Files\ie Web Controls directory.
2, run the program--microsoft Visual Studio.NET 2003--visual Studio.NET Tools--microsoft Visual Studio.NET 2003 command prompt, into the IE Web contr OL installation directory.
3, run BUILD.bat.
4, run xcopy/s/I. \build\runtime (site root, default system disk): \inetpub\wwwroot\webctrl_client\1_0/y.

Right-click the Toolbox--web form, select Add/Remove Items ..., select the. NET Framwork component in the pop-up dialog box, click Browse, locate the IE WebControl.dll file, and add it.

This configures the operating environment. The following is the actual operation phase.

First, define the TreeView control

Code Copy Box
' import namespace
<%@ import namespace= ' Microsoft.web.UI.webcontros '%>
' registers the namespace and gives it a tagprefix. To make it easier to define the controls in this control Library
<%@ Register TagPrefix = "Iecontrols"
    namespace= " Microsoft.web.UI.webcontrols "
    assembly=" Microsoft.web.UI.webcontrols
%>
' after setting the directive , you can define a TreeView control such as the following
<iecontrols:treeview
   id= "Tvbasic"
   autoselect= False '
   shoplus= ' true '
   showlines= ' true '
   expandlevel=2
    runat= "Server"

----------
</idcontrols:treeview>

Here's how to explain the code:
AutoSelect = "false"
When a visitor locates a node in the TreeView control, you can use the arrows on the keyboard to do this. When the AutoSelect property value of this TreeView control is set to TRUE, you can scroll through the TreeView control by using the keys on the keyboard. To select the NIE an entry. If set to False, this is not allowed.
Showplus= "true"
When two nodes in a TreeView control are received together, you can display a plus sign (+), and the visitor knows that the node can be expanded. By setting the Showplus property, you can control whether the plus sign is displayed in this position. If this property value is set to True, the plus sign is used; otherwise not used.
Showlines= "true"
You can display lines between two nodes in a TreeView control, and you can control whether such lines are displayed by setting the Showlines property.
expandlevel=2
The Expandlevel property of this TreeView control is used to determine the number of levels that are expanded along the hierarchy of this TreeView control by default.
<iecontrols:treeview>
---------
</iecontrols:treeview>

Between the opening and closing tags defined by this TreeView control, you can define some TreeNode controls.

Two, using the TreeNode control in the TreeView control

If you create a TreeView control, you need to add some TreeNode controls to display some information. The TreeNode control is displayed as an item in the hierarchy of the TreeView control. The TreeNode control can contain the TreeView control; , the control itself can exist independently. The following shows you how to define a TreeNode control in a TreeView control.
This example will show some of my favorite sites, each of which can be a standalone, or there are other sites under it. This TreeView control has the following definition:

Code Copy Box
<iecontrols:treeview
Id= "Tvwebsite"
AutoSelect = "false"
Showplus= "true"
Showlines= "true"
expandlevel=2
runat = "server"
>
' Next, in the start and end tags of the TreeView control, define the TreeNode control
<iecontrols:treenode text= "I often go to the site" >
<idcontrols:treenode text= "Design class Site" >
<idcontrols:treenode text= "Blue ideal"/>
<idcontrols:treenode text= "Windy Day"/>
<idcontrols:treenode text= "Design Alliance"/>
</iecontrols:treenode>
<iecontrols:treenode text= "Programming class Site" >
<iecontrols:treenode text= "ASP Programming" >
<iecontrols:treenode text= "ASP cool"/>
<iecontrols:treenode text= ""/>
</iecontrols:treenode>
<iecontrols:treenode text= "ASP. NET Programming ">
<iecontrols:treenode text= "dotnet Technology Network"/>
<iecontrols:treenode text= "asp.net"/>
</iecontrols:treenode>
<iecontrols:treenode text= "The programmer's Base camp"/>
</iecontrols:treenode>
</iecontrols:treenode>

Where a two-level node is defined. This tree view contains the two large nodes of the design class site and the programming class site, while the programming class site has two subnodes "ASP Programming" and "asp.net programming", each of which defines another node.

Notice the difference between the TreeNode control that contains the other nodes and the standalone TreeNode control. When there are other TreeNode controls in one TreeNode control, the child controls are defined between the opening and closing tags of their parent control:

<iecontrols:treenode text= "" >
</iecontrols:treenode>

But for a stand-alone TreeNode control, its start and end tags are self-contained:

<iecontrols:treenode text= ""/>

This is the expansion of the entire view node when the page is first loaded. Because the Expandlevel property value is set to 2, the nodes at all levels are displayed. Also note that because both the Showlines and Showplus properties are true, So in all of the displayed views, the lines and connectors between the connecting nodes are displayed.

"My frequented Sites" is the currently selected node item. A visitor can hit the carriage return or click the mouse on the node. Visitors can then use the arrows on the keyboard to navigate the hierarchical structure of the tree view.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.