ASPxPopupMenu Class
Represents a popup menu control.
Namespace: DevExpress.Web
Assembly: DevExpress.Web.v24.1.dll
NuGet Package: DevExpress.Web
Declaration
Remarks
Use the ASPxPopupMenu class to display a context menu in your web application. A popup menu control can be displayed, for instance, when an end-user clicks the right mouse button over a control or area of the page.
Create a PopupMenu Control
Design Time
The ASPxPopupMenu 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 markup in the page’s source code.
<dx:ASPxButton ID="popupMenuButton" runat="server" Text="Pop-up Menu" AutoPostBack="false" />
<dx:ASPxPopupMenu ID="popupMenu" runat="server" PopupElementID="popupMenuButton" AutoPostBack="True"
PopupHorizontalAlign="OutsideRight" PopupVerticalAlign="TopSides" PopupAction="MouseOver">
<Items>
<dx:MenuItem Text="Country Name" Name="Country_Name">
</dx:MenuItem>
<dx:MenuItem Text="Capital" Name="Capital">
</dx:MenuItem>
<dx:MenuItem Text="Continent" Name="Continent">
</dx:MenuItem>
</Items>
</dx:ASPxPopupMenu>
Run Time
using DevExpress.Web;
...
protected void Page_Load(object sender, EventArgs e)
{
ASPxButton button = new ASPxButton();
button.ID = "popupMenuButton";
button.Text = "Pop-up Menu";
button.AutoPostBack = false;
Page.Form.Controls.Add(button);
ASPxPopupMenu popupMenu = new ASPxPopupMenu();
popupMenu.ID = "popupMenu";
popupMenu.PopupElementID = "popupMenuButton";
popupMenu.AutoPostBack = true;
popupMenu.PopupHorizontalAlign = PopupHorizontalAlign.OutsideRight;
popupMenu.PopupVerticalAlign = PopupVerticalAlign.TopSides;
popupMenu.PopupAction = PopupAction.MouseOver;
popupMenu.Items.AddRange(new List<DevExpress.Web.MenuItem>() {
new MenuItem { Text = "Country Name", Name = "Country_Name" },
new MenuItem { Text = "Capital", Name = "Capital" },
new MenuItem { Text = "Continent", Name = "Continent"},
});
Page.Form.Controls.Add(popupMenu);
}
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 ASPxPopupMenu control supports the following common features:
- Data binding that allows the control’s menu items to be bound to hierarchal data sources.
- Programmatic access to the menu object model to dynamically create menu items, populate them with sub-items, set properties, and so on.
- Programmatic access to the menu client-side object model to perform specific client actions with menu items.
- Customizable appearance through themes, user-defined images, styles, and user-defined templates.
An ASPxPopupMenu control is made up of a tree of menu items represented by MenuItem objects. Menu items at the top level (level 0) are called root menu items. A menu item that has a parent menu item is called a child menu item. All root menu items are stored in the menu control’s ASPxMenuBase.Items collection. Child menu items are stored in the parent menu item’s MenuItem.Items collection. This enables you to create a hierarchical menu structure of any complexity.
A popup menu can be invoked dynamically when a specific action defined via the ASPxPopupMenu.PopupAction property is performed within a web control or HTML elements specified by the ASPxPopupMenu.PopupElementID property. Submenus of the displayed popup menu appear when the mouse pointer moves over the menu items that have children. The delay in displaying the popup menu or its submenus is controlled by the ASPxMenuBase.AppearAfter property. The popup menu or its submenus automatically disappear after a certain duration specified by the ASPxMenuBase.DisappearAfter property or when an end-user clicks outside of the menu.
Each item of a popup menu control is capable of displaying any text specified by its MenuItem.Text property, item image which can be defined via the MenuItem.Image property and a tooltip text set via the MenuItem.ToolTip property. The response of items to end-user clicks can be specified in two ways:
- Specify the MenuItem.NavigateUrl property of an item. In this instance, the browser will navigate to the specified linked page when an item is clicked (by default, a linked page is displayed in the same window or frame as the menu control; to display the linked content in a different window or frame, use the menu’s ASPxMenuBase.Target property).
- Handle the clicks on menu items via specific events in order to process them either on the server or client depending upon the menu control’s ASPxMenuBase.AutoPostBack property setting.
The visibility and the visual order of menu items within their menus (submenus) can be controlled by the MenuItem.Visible and MenuItem.VisibleIndex properties of item objects.
The ASPxPopupMenu control offers you complete customization of root items, child items and submenu styles (for instance, see the ASPxMenuBase.ItemStyle, ASPxMenuBase.SubMenuItemStyle and ASPxMenuBase.SubMenuStyle properties). Moreover, you can use the template technology to get unlimited control over the contents of items and submenus. You can specify the corresponding templates at the level of the menu control (via the ASPxMenuBase.ItemTemplate and ASPxMenuBase.SubMenuTemplate properties) and at the level of individual menu items (via the MenuItem.Template and MenuItem.SubMenuTemplate properties).
The ASPxPopupMenu control can be bound to any hierarchical data source by using its ASPxHierarchicalDataWebControl.DataSourceID or ASPxDataWebControlBase.DataSource property. Note that during data binding specific ASPxMenuBase.ItemDataBound events are generated, that allow you to dynamically map properties of the menu’s items to the required data fields of the bound data source.
Note
The ASPxPopupMenu control provides you with a comprehensive client-side functionality implemented using JavaScript code:
- The control’s client-side equivalent is represented by the ASPxClientPopupMenu object.
- On the client side, the client object can be accessed directly by the name specified via the ASPxMenuBase.ClientInstanceName property.
- The available client events can be accessed by using the ASPxMenuBase.ClientSideEvents property.
The client-side API is always available for this control.
If you want menu items of the top menu level to be constantly displayed on a page, consider using the ASPxMenu control.