Custom Toolbar Items - Devexpress

Jan 14, 2022
2 minutes to read

In addition to the default toolbar items that allow users to perform specific predefined actions, the ASPxHtmlEditor‘s toolbars support items with custom functionality. The following table contains the control’s custom toolbar items:

Item

Image

Corresponding class

Description

| | --- | --- | --- | --- | |

Button

CustomToolbarButton

A button that allows users to perform custom actions when clicked.

| |

Combo Box

ToolbarComboBox

A dropdown list with a choice of selectable items - much like a standard combo box.

Online demo: Combo Box

| |

Drop-down Menu

ToolbarDropDownMenu

A button that displays a drop-down menu when clicked.

Online demo: Drop-down Menu

| |

Drop-down Item Picker

ToolbarDropDownItemPicker

A button with a drop-down list of items available for selection. To select an item, users can hover the mouse pointer over a button or click it to open its drop-down list and then select an item in the list.

Online demo: Drop-down Item Picker

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/*" />