A newer version of this page is available. Switch to the current version.

ToolbarDropDownMenu Class

Implements a dropdown menu custom toolbar item functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

Assembly: DevExpress.Web.ASPxHtmlEditor.v18.2.dll


public class ToolbarDropDownMenu :
Public Class ToolbarDropDownMenu
    Inherits ToolbarCustomDropDownBase


The ToolbarDropDownMenu class allows you to provide the ASPxHtmlEditor toolbar with custom dropdown menu items.


Properties provided by the ToolbarDropDownMenu class allow you to customize the item appearance and behavior.

  • ToolbarDropDownMenu.Items. Use this collection to add items to a dropdown menu.
  • ToolbarItemBase.Image property set. Allows you to define an image to be displayed within a dropdown menu.
  • ToolbarDropDownMenu.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, by the editor's ASPxClientHtmlEditor.CustomCommand client event handler.
  • ToolbarCustomDropDownBase.ClickMode. Use this property to specify the response to a click on a dropdown menu. 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 an dropdown button executes a command associated with it via its ToolbarDropDownMenu.CommandName property, and implemented using the editor's ASPxClientHtmlEditor.CommandExecuted event.
    • ExecuteSelectedItemAction. Specifies that a click on a dropdown button executes an action associated with a currently selected item 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 ToolbarCustomDropDownBase.SelectedItemIndex property.


This example demonstrates how to create a custom toolbar with different types of custom toolbar items in the ASPxHtmlEditor.

A toolbar item's CommandName property specifies the name of the command that is executed by this item. The custom command logic is implemented in the ASPxClientHtmlEditor.CustomCommand event handler.

function OnCommandExecute(s, e) {
     var value = e.parameter;
     switch (e.commandName) {
          case "InsertTemplate":
          case "InsertSmiley":
          case "InsertCustomer":
          case "DeleteAll":
               s.SetHtml(' ');

function InsertTemplate(value) {
     HtmlEditor.GetSelection().SetHtml(value + " ");

function InsertSmiley(value) {
     var selection = HtmlEditor.GetSelection();
     var valueInfo = value.split("#");
     selection.SetHtml("<img style='margin-bottom:-2px;' src='../Content/Smilies/" + valueInfo[0] + ".png' alt='" + valueInfo[2] + "' title='" + valueInfo[1] + "' />");

function InsertCustomer(value) {
See Also