ToolbarDropDownMenu Class

Implements a dropdown menu custom toolbar item functionality.

Namespace : DevExpress.Web.ASPxHtmlEditor

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

Declaration

C#
VB.NET

csharp

public class ToolbarDropDownMenu :
    ToolbarCustomDropDownBase

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.

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
ASPX

javascript

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

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