ASPxTreeView Class
Represents the web navigation treelike control.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.1.dll
NuGet Package: DevExpress.Web
Declaration
public class ASPxTreeView :
ASPxHierarchicalDataWebControl,
IRequiresLoadPostDataControl,
IControlDesignerRelated API Members
The following members return ASPxTreeView objects:
Remarks
Add an ASPxTreeView control to your web application to provide it with the advanced navigation capabilities. This control allows you to display a hierarchical data as a tree.
Create a Tree View
Design Time
The ASPxTreeView control is available on the DX.24.1: Navigation & Layout toolbox tab in the Microsoft Visual Studio IDE.
Drag the control onto a form and customize the control’s settings, or paste the control’s markup in the page’s source code.
<dx:ASPxTreeView ID="treeView" runat="server" ClientInstanceName="ClientTreeView">
<Nodes>
<dx:TreeViewNode Text="Music" Expanded="True">
<Image Url="~/TreeView/Images/MediaContent/music.png" />
<Nodes>
<dx:TreeViewNode Text="Andy McKee">
<Nodes>
<dx:TreeViewNode Text="Rylynn" />
<dx:TreeViewNode Text="Drifting" />
</Nodes>
</dx:TreeViewNode>
<dx:TreeViewNode Text="Antoine Dufour">
<Nodes>
<dx:TreeViewNode Text="Reality" />
</Nodes>
</dx:TreeViewNode>
</Nodes>
</dx:TreeViewNode>
<dx:TreeViewNode Text="Video">
<Image Url="~/TreeView/Images/MediaContent/video.png" />
<Nodes>
<dx:TreeViewNode Text="Inception - Official trailer" />
<dx:TreeViewNode Text="MythBusters Top 25 Moments" />
<dx:TreeViewNode Text="Richard Feynman - Ode on a Flower" />
</Nodes>
</dx:TreeViewNode>
</Nodes>
</dx:ASPxTreeView>
Run Time
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxTreeView treeView = new ASPxTreeView();
treeView.ID = "treeView";
treeView.ClientInstanceName = "ClientTreeView";
TreeViewNode node1 = new TreeViewNode();
node1.Text = "Music";
node1.Image.Url = "~/TreeView/Images/MediaContent/music.png";
node1.Expanded = true;
TreeViewNode node1_nestedNode1 = new TreeViewNode();
node1_nestedNode1.Text = "Andy McKee";
node1_nestedNode1.Nodes.AddRange(new List<TreeViewNode>() {
new TreeViewNode("Rylynn"),
new TreeViewNode("Drifting")
});
TreeViewNode node1_nestedNode2 = new TreeViewNode();
node1_nestedNode2.Text = "Antoine Dufour";
node1_nestedNode2.Nodes.Add("Reality");
node1.Nodes.AddRange(new List<TreeViewNode>() { node1_nestedNode1, node1_nestedNode2 });
TreeViewNode node2 = new TreeViewNode();
node2.Text = "Video";
node2.Image.Url = "~/TreeView/Images/MediaContent/video.png";
node2.Nodes.AddRange(new List<TreeViewNode>() {
new TreeViewNode("Inception - Official trailer"),
new TreeViewNode("MythBusters Top 25 Moments"),
new TreeViewNode("Richard Feynman - Ode on a Flower")
});
treeView.Nodes.AddRange(new List<TreeViewNode>() { node1, node2 });
Page.Form.Controls.Add(treeView);
}
Note
DevExpress controls require that you register special modules, handlers, and options in the Web.config file. You can change this file or switch to the Design tab in the Microsoft Visual Studio IDE to automatically update the Web.config file. Note that this information is automatically registered if you use the DevExpress Template Gallery to create a project.
The ASPxTreeView control supports the following common features:
- Data binding that allows the control’s nodes to be bound to hierarchal data sources.
- Programmatic access to the ASPxTreeView object model to dynamically create nodes, populate them with child nodes, set properties, and so on.
- Programmatic access to the ASPxTreeView client-side object model to perform specific client actions with nodes.
- An ability to perform round-trips to the server using the AJAX-based callback technology.
- Customizable appearance through themes, user-defined images, styles, and user-defined templates.
An ASPxTreeView control is made up of a tree of nodes represented by TreeViewNode objects. The parent node for all nodes, displayed within the ASPxTreeView is called the root node. This is a special node which isn’t displayed and can be accessed via the ASPxTreeView.RootNode property. The collection of its child nodes can be accessed via the ASPxTreeView.Nodes property. A node can have its own child nodes, that are stored in the parent node’s TreeViewNode.Nodes collection. This enables you to create a hierarchical structure of any complexity.
Each node of an ASPxTreeView control is capable of displaying any text specified by its TreeViewNode.Text property, a node image, which can be defined via the TreeViewNode.Image property, a check box, whose visibility is controlled by the ASPxTreeView.AllowCheckNodes and TreeViewNode.AllowCheck properties, and a tooltip text set via the TreeViewNode.ToolTip property.
The response of nodes to end-user clicks can be specified in two ways:
- Specify the TreeViewNode.NavigateUrl property of a node. In this instance, the browser will navigate to the specified linked page when a node is clicked. By default, a linked page is displayed in the same window or frame as the ASPxTreeView control. To display the linked content in a different window or frame, use the ASPxTreeView‘s ASPxTreeView.Target property (or the TreeViewNode.Target property for a particular node).
- Handle the ASPxTreeView.NodeClick event, in order to process them either on the server or client, depending upon the ASPxTreeView control’s ASPxTreeView.AutoPostBack property setting.
In order to control the clickable area of items, the ASPxTreeView.NodeLinkMode property can be used.
Nodes can be expanded/collapsed via the user interface (using expand buttons or double clicking nodes) or programmatically (see the TreeViewNode.Expanded property and the ASPxTreeView.CollapseAll, ASPxTreeView.ExpandAll, ASPxTreeView.ExpandToDepth, and ASPxTreeView.ExpandToNode methods) in order to show/hide their contents. The visibility of nodes can be controlled by the TreeViewNode.Visible property.
The look of the ASPxTreeView control’s default elements can be completely modified by creating a specific template, defining how an element will be rendered by a client browser. The ASPxTreeView control allows you to create templates for two element types: the node text content and the entire node content. You can apply templates for all identical elements within the ASPxTreeView (using control level templates) or for a particular element (using node level templates).
The ASPxTreeView control can be bound to a hierarchical data source by using its ASPxHierarchicalDataWebControl.DataSourceID or ASPxDataWebControlBase.DataSource property. Note that during data binding, specific ASPxTreeView.NodeDataBound events are generated, that allow you to dynamically map properties of the ASPxTreeView‘s nodes to the required bound data source’s data fields.
Note
The ASPxTreeView control provides you with a comprehensive client-side functionality implemented using JavaScript code:
- The control’s client-side equivalent is represented by the ASPxClientTreeView object.
- On the client side, the client object can be accessed directly by the name specified via the ASPxTreeView.ClientInstanceName property.
- The available client events can be accessed by using the ASPxTreeView.ClientSideEvents property.
The control’s client-side API is enabled if the ASPxTreeView.EnableClientSideAPI property is set to true, or the ASPxTreeView.ClientInstanceName property is defined, or any client event is handled.