UI Widgets DropDownMenu

A drop-down menu widget.

Type: Object

This widget is a UI element (a button or a toolbar item) that displays a drop-down menu when clicked. The drop-down menu items are loaded from an array specified from the items configuration option. You can specify a simple array as the widget data source.

JavaScript
var dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];

Declare a function that processes a menu item click, and assign it to the itemClickAction configuration option.

JavaScript
var menuItemClicked = function(e){
    alert(e.itemData + "item clicked");
};

Note that you can access the clicked item text from the itemData field of the object passed as an argument to the itemClickAction function.

To create a dxDropDownMenu widget, add a div element with dxDropDownMenu Knockout binding within the body of the required view.

HTML
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, itemClickAction: menuItemClicked }"></div>

The following demo illustrates how to create a widget without creating an HtmlApplication, views, and layouts. Refer to the Add a widget documentation section to learn how to create widgets within views in a PhoneJS application.

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, itemClickAction: menuItemClicked }"></div>
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
menuItemClicked = function(e){
    DevExpress.ui.notify( e.itemData + " item clicked", "success", 2000 );
};
body {
  text-align: center;
}
#menu {
  margin-top: 25px;
}

Configuration

An object defining configuration options for the dxDropDownMenu widget.

Methods

This section describes members used to manipulate the object.