O TreeView controle pode exibir vários tipos diferentes de dados: dadosestático que estão especificados declarativamente no controle, dados que é limite ao controle ou dados que são adicionados para o TreeView controlar programaticamente, em resposta a ações do usuário .
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">
<asp:TreeNode Value="Child1" Expanded="True" Text="1">
<asp:TreeNode Value="Grandchild1" Text="A" />
<asp:TreeNode Value="Grandchild2" Text="B" />
<asp:TreeNode Value="Child2" Text="2" />
<asp:TreeNode Value="Child3" Expanded="True" Text="3">
<asp:TreeNode Value="Grandchild1" Text="A" />
Bind Data to the TreeView Control
Displaying Data Programmatically by Using TreeNodeCollection
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.
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.
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 ("").
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.
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.
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.
Using the TreeView Control with UpdatePanel Controls
controls are used to update selected regions of a page instead of updating the whole page with a postback. The TreeView control can be used inside an UpdatePanel control with the following restrictions:
callbacks must be associated with asynchronous postbacks, or callback event validation will fail. When you set the PopulateOnDemand property of the TreeNode controls to true, callbacks are enabled. You can use one of the following approaches to ensure that TreeView callbacks work with the UpdatePanel control:
If the TreeView control is not inside an UpdatePanel control, disable callbacks on TreeNode controls that are not part of an asynchronous postback. To do this, set the PopulateOnDemand property to false.
Programmatically refresh all controls that register callbacks during the asynchronous postback. For example, you can place the TreeView control inside an UpdatePanel control. The TreeView control does not have to be in the UpdatePanel control where the asynchronous postback originates, as long as the UpdatePanel control that contains the TreeView control is refreshed.
You must apply styles by using a reference to a Cascading Style Sheet (CSS) class. For example, instead of setting the NodeStyle property by using a property-subproperty attribute, set the style by using the property-CssClass attribute. Similarly, when you use the NodeStyle template to set the style, use the CssClass attribute of the template.
The EnableClientScript property must be true (the default value). In addition, if callbacks are enabled for the TreeView control, you cannot change the EnableClientScript property between asynchronous postbacks.
For more information about using UpdatePanel controls, see Visão geral sobre controle UpdatePanel and Visão geral de renderização de página parcial.
Each TreeNode object contains four UI elements, which are shown in the following image and described in the table below.
TreeNode UI Elements
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 boxes can be optionally enabled, which allows users to select a particular node.
You can specify a node image to display next to the 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.
Specifies the amount of vertical spacing between the entire current node and adjacent nodes above and below.
Specifies the amount of space rendered on the top and bottom of the TreeNode text.
Specifies the amount space rendered on the left and right of the TreeNode text.
Specifies the amount of space above and below the child nodes of the TreeNode.
Specifies the path to the image that displays next to the TreeNode.
Para obter mais informações, consulte Personalizando a Aparência (Look and Feel) do Controle do Servidor Web TreeView.
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 Seleção, navegação, e caixas de seleção no controle de servidor Web TreeView.
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.