Skip to main content

ToolbarDropDownMenu Class

Implements a dropdown menu custom toolbar item functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

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

NuGet Package: DevExpress.Web

Declaration

public class ToolbarDropDownMenu :
    ToolbarCustomDropDownBase

Remarks

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

ASPxHtmlEditor-ToolbarItem-DropdownMenu

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.

Example

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":
               InsertTemplate(value);
               break;
          case "InsertSmiley":
               InsertSmiley(value);
               break;
          case "InsertCustomer":
               InsertCustomer(value);
               break;
          case "DeleteAll":
               s.SetHtml(' ');
               break;
     }
}

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) {
     HtmlEditor.GetSelection().SetHtml(value);
}
See Also