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

Configuration

An object defining configuration options for the dxDropDownMenu widget.

Methods

This section describes members used to manipulate the object.