Change Theme Settings
Change Theme Settings
Show All Themes

Client-Side Functionality

  • Visa
  • MasterCard
  • Union
  • American Express
  • Maestro
Item options

This example demonstrates how to manipulate a menu control programmatically on the client using our extended client-side functionality. The client-side programmatic interface is available if the EnableClientSideAPI property is set to true or if there is a handler assigned to any client-side event.

In this demo, each item of the menu control is identified using its Name property. In order to obtain a specific menu item by its name on the client side the GetItemByName method is used. A particular menu item can be selected with the help of the SetSelectedItem method by passing it the required item. Look at the code of the InitMenu function (see JS code) which handles the client-side Init event of the menu control. This handler defines the initially selected menu item (Visa) within the menu.

In the code of the ShowProperties function (see JS code), the selected menu item is obtained with the help of the GetSelectedItem function and information on the selected menu item's index and name is displayed.

The MenuItemClick function that is a handler of the menu's ItemClick event (see ASPX and JS code) demonstrates how to synchronize the dropdown editor's value with the name of the clicked menu item.

Note that an individual client object can be referenced either directly by its ID (for instance, by using the following code: ASPxMenu1.GetItemCount()) or by using the Get method of a common collection for our ASPx web controls (this can be useful when our web control is contained within a UserControl or MasterPage; that is when the resulting client ID is generated by a specific NamingContainer). The GetMenu function (see JS code) demonstrates how to access a client menu object via our control collection.

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