Skip to main content

ToolbarDropDownMenu Class

Implements a dropdown menu custom toolbar item functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

Assembly: DevExpress.Web.ASPxHtmlEditor.v23.1.dll

NuGet Package: DevExpress.Web


public class ToolbarDropDownMenu :


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