Change Theme Settings
Change Theme Settings
Show All Themes

Data Binding

This demo illustrates how the ASPxTreeView can be populated with node information taken from a data source.

Primarily designed to be a site navigation control, the ASPxTreeView supports binding to data sources containing hierarchical data. Any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource, etc.) may be used as a data source for the ASPxTreeView control. The ASPxTreeView can be bound to a data source in a standard manner - using the DataSourceID or DataSource property.

The ASPxTreeView control implements specific properties that point to the data fields containing the necessary data. These are the TextField, ImageUrlField, NavigateUrlField, NameField and ToolTipField properties. If these properties are not defined, the ASPxTreeView is able to automatically bind to data fields whose names coincide with property names of a TreeViewNode object (such as the Text, Image.Url, NavigateUrl, Name and ToolTip).

The ASPxTreeView control implements the NodeDataBound event, allowing you to customize settings of an individual node after it has been bound to data. For instance, you can modify the content of a node or change its formatting.

The ASPxTreeView's DataBound event (which occurs after the control data binding has been finished) allows you to finally customize the control (for instance you can set the selected node).

In this demo, the ASPxTreeView is bound to an XML file using a standard XmlDataSource component. The source XML file contains hierarchical information about a set of classes and their members (properties, methods, events). The ASPxTreeView's TextField, ImageUrlField, and NavigateUrlField properties are used to specify the names of data item attributes from which the corresponding node settings should be obtained. The NodeDataBound event is handled to change the text style of nodes which represent classes (their text is displayed bold).

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Components Installer
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher)
Open CS Solution
Open VB Solution
The source code files for this demo are installed (by default) in the following directories:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\ASPxNavigationAndLayoutDemos
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\VB\ASPxNavigationAndLayoutDemos