Toolbar Items - Dropdown Menu

This demo illustrates how to add a dropdown menu item to a toolbar.

In ASPxHtmlEditor toolbars, a dropdown menu item represents a button that displays a dropdown menu when clicked. In this demo, you can insert the current date and time into the editor, by selecting an appropriate date/time format in a dropdown menu.

An ASPxHtmlEditor dropdown menu is represented by a ToolbarDropDownMenu toolbar item. You can use ToolbarDropDownMenu options to customize the appearance and behavior of a dropdown menu item, as required. The most important options are listed below:

• Items. Use this collection to add items to a dropdown menu.
• Image. Allows you to define an image to be displayed within the ToolbarDropDownMenu toolbar item.

• ClickMode. Use this property to specify the response to a click on the ToolbarDropDownMenu toolbar item. The following options are available:

  • ShowDropDown. This value is used by default, and determines that a click on a dropdown button invokes a dropdown menu.
  • ExecuteAction. Specifies that a click on a dropdown button executes an action associated with the ToolbarDropDownMenu toolbar item (using the CommandName property and the CommandExecute event).
  • ExecuteSelectedItemAction. Specifies that a click on a dropdown button executes an action associated with an item being currently selected within a dropdown menu. In this mode, a toolbar button displays the recently selected menu item's image or caption. This allows users to select this menu item by clicking the button, rather than opening a dropdown menu and selecting the item again. To specify the initially selected menu item, use a dropdown menu's SelectedItemIndex property.
• CommandName. Use this property to associate a command name with a dropdown menu. You can use this command name to respond to menu item clicks on the client side, via the editor's CustomCommand client event handler. In this demo, the OnCommandExecute JavaScript function is designated as the CustomCommand client event handler (see the demo's ASPX markup file). Each time a menu item or dropdown button is clicked, the selected menu item's value (the date/time format specified via the item's Value property) is passed as a parameter to the OnCommandExecute function. Then, this function passes the value to the InsertDateTime function, which inserts a date/time value to the editor, in the specified format.