DropDownMenu Configuration

An object defining configuration options for the dxDropDownMenu widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, activeStateEnabled: enableActiveState }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Active state</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableActiveState }"></div>
  </div>
</div>
enableActiveState = ko.observable(true);
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
body{
  text-align: center;
}

buttonClickAction

An action performed when the DropDownMenu button is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, buttonClickAction: processClick }"></div>
processClick = function () {
  DevExpress.ui.dialog.alert("The widget button has been clicked", "Action executed");
};
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}

buttonIcon

The name of the icon to be displayed by the DropDownMenu button.

Type: String
Default Value: ""

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, buttonIcon: icon }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Icon</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: iconsDataSource, value: icon }"></div>
  </div>
</div>
icon = ko.observable();
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
iconsDataSource = DevExpress.data.createDataSource({
  load: function (loadOptions) {
    if (loadOptions.refresh) {
      var dfd = new $.Deferred();
      $.get("/Content/data/icons.txt", function (data) {
        if (icon() === undefined)
          icon(data[0]);
        if (loadOptions.searchString === undefined)
          dfd.resolve(data);
        else
          dfd.resolve($.grep(data, function (e) {
            return e.indexOf(loadOptions.searchString.toLowerCase()) !== -1;
          }));
      }, "json");
      return dfd.promise();
    }
  },
  lookup: function(key){
    return key;
  }
});
iconsDataSource.load();
body{
  text-align: center;
}
.button{
  margin: 10px;
}

buttonIconSrc

A URL pointing to the image to be displayed by the DropDownMenu button.

Type: String
Default Value: ""

buttonText

The text displayed in the DropDownMenu button.

Type: String
Default Value: ""

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: text, items: dropDownMenuData }"></div>
<div class="button" data-bind="dxButton: { buttonText: text }"></div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Text</div>
    <div class="dx-field-value" data-bind="dxTextBox: { value: text }"></div>
  </div>
</div>
text = ko.observable("Click me");
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, clickAction: processClick}"></div>
processClick = function () {
  DevExpress.ui.dialog.alert("The widget has been clicked", "Action executed");
};
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}

dataSource

The data source used to fetch data for the drop-down menu.

Type: Object
Default Value: null

The default template of a data source item object may contain the following fields.

  • html - specifies the html code inserted into the item element
  • text - specifies the text inserted into the item element

Refer to the Data-Bound Application tutorial for more information.

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, disabled: dropDownMenuDisabled }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: dropDownMenuDisabled }"></div>
  </div>
</div>
dropDownMenuDisabled = ko.observable(false);
dropDownMenuData = [
    "Copy",
    "Cut",
    "Clear"
];
body{
  text-align: center;
}

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the height of the widget in pixels;
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit");
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; }).

itemClickAction

An action performed when the DropDownMenu item is clicked.

Type: Action
Default Value: null

An object passed to the action function assigned to this option can have the following fields besides the basic field set.

  • itemData - contains an object representing the clicked item
  • itemElement - contains an html element representing the clicked item
Show Example:
jQuery
<div data-bind="dxDropDownMenu: { buttonText: 'Show menu', items: dropDownMenuData, itemClickAction: processClick}"></div>
processClick = function (clickOptions) {
  DevExpress.ui.dialog.alert("\"" + clickOptions.itemData + "\" has been clicked", "Action executed");
};
dropDownMenuData = [
  "Copy",
  "Cut",
  "Clear"
];
body{
  text-align: center;
}
.button{
  margin: 10px;
}

itemRender

A function used to render drop-down menu items.

Type: function
Default Value: null

The rendering function should have the following parameters, and return an HTML string, element, or jQuery object representing the rendered item.

  • itemData - the object representing the rendered item
  • itemIndex - the index of the rendered item
  • itemElement - the container element containing the rendered item

itemTemplate

The name of the template used to render widget items, or the function returning the template name.

Type: String|function
Default Value: "item"

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the widget width in pixels;
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit");
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; }).