Show theme settings Shopping cart Download trialFree Trial
Change Theme Settings
Change Theme Settings
Show All Themes

Data Binding

This demo illustrates how the ASPxMenu control can be populated with item information taken from a data source.

The ASPxMenu supports binding to data sources, which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (e.g. SiteMapDataSource, XmlDataSource, etc.). The ASPxMenu can be bound to a data source in the standard manner - using the DataSourceID or DataSource property.

While binding, the ASPxMenu control automatically creates the MenuItem objects and retrieves their property values from corresponding items. The menu supports two methods of retrieving data from a specified data source. One involves manually setting the control's specific data-related properties (TextField, ImageUrlField, NavigateUrlField, NameField, and ToolTipField) to the data source item attribute names. The other one exploits the ASPxMenu's ability to recognize data items and automatically retrieve some item characteristics from the data fields named in a specific way.

Additionally, the ASPxMenu provides specific events related to data binding that can be handled according to your application logic.

  • The ItemDataBound event allows you to customize settings of an individual item immediately after it has been bound to data.
  • The DataBound event (which occurs after the control data binding has been finished) allows you to finally customize the control.

In this demo, the ASPxMenu control is bound to an ASPxSiteMapDataSource control by specifying just one DataSourceID property. An item's Text and NavigateUrl property values are automatically retrieved from the title and url SiteMapNode attributes. The ItemDataBound event is handled for two purposes: to add an image sprite CSS class to items that have the "SpriteImage" attribute within the data source; and to bold a score and add it to the text of items that have the "result" attribute within the data source.

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 Component 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