ToolbarDropDownMenu Class

Implements a dropdown menu custom toolbar item functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

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

Declaration

C#

public class ToolbarDropDownMenu :
    ToolbarCustomDropDownBase

VB.NET

Public Class ToolbarDropDownMenu
    Inherits ToolbarCustomDropDownBase

Remarks

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.

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.

JS

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);
}

ASPX

<dx:ASPxHtmlEditor ID="HtmlEditor" runat="server">
     <ClientSideEvents CustomCommand="OnCommandExecute " />
     <Toolbars>
          <dx:HtmlEditorToolbar Name="myCustomToolbar">
               <Items>
                    <dx:ToolbarDropDownMenu BeginGroupField="BeginGroup" CommandName="InsertTemplate" DataSourceID="MenuDataSource" TextField="Name" ToolTip="Insert Template" TooltipField="ToolTip" ValueField="Text">
                         <Image IconID="support_template_16x16">
                         </Image>
                    </dx:ToolbarDropDownMenu>
                    <dx:ToolbarDropDownItemPicker CommandName="InsertSmiley" DataSourceID="ItemPickerDataSource" ImageUrlField="ImageUrl" ToolTip="Insert Smiley" TooltipField="Tooltip" ValueField="Value">
                    </dx:ToolbarDropDownItemPicker>
                    <dx:ToolbarComboBox CommandName="InsertCustomer" DefaultCaption="Customers" ToolTip="Insert Customer">
                         <PropertiesComboBox DataSourceID="ComboBoxDataSource" TextField="Name" ValueField="Name">
                         </PropertiesComboBox>
                    </dx:ToolbarComboBox>
                    <dx:CustomToolbarButton CommandName="DeleteAll" Text="Delete All">
                    </dx:CustomToolbarButton>
               </Items>
          </dx:HtmlEditorToolbar>
     </Toolbars>
</dx:ASPxHtmlEditor>

<asp:XmlDataSource ID="MenuDataSource" runat="server" DataFile="~/App_Data/MenuData.xml"
     TransformFile="~/App_Data/MenuData.xslt" XPath="//Templates/*" />
<asp:XmlDataSource ID="ItemPickerDataSource" runat="server" DataFile="~/App_Data/ItemPickerData.xml"
     XPath="//Smilies/*" />
<asp:XmlDataSource ID="ComboBoxDataSource" runat="server" DataFile="~/App_Data/ComboBoxData.xml"
     XPath="//Customers/*" />

Implements

IStateManager

IPropertiesOwner

IExpressionsAccessor

Inheritance

Object

StateManager

CollectionItem

ToolbarItemBase

HtmlEditorToolbarItem

ToolbarDropDownBase

ToolbarCustomDropDownBase

ToolbarDropDownMenu