CustomToolbarButton Class

Implements a custom toolbar button functionality.

Namespace: DevExpress.Web.ASPxHtmlEditor

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

NuGet Package: DevExpress.Web

Declaration

C#

public class CustomToolbarButton :
    HtmlEditorToolbarItem

VB.NET

Public Class CustomToolbarButton
    Inherits HtmlEditorToolbarItem

Remarks

The CustomToolbarButton class allows you to provide the ASPxHtmlEditor toolbar with custom buttons.

Properties provided by the CustomToolbarButton class allow you to customize the button appearance and behavior.

• CustomToolbarButton.ViewStyle. Use this property to specify how the current toolbar button is represented within a toolbar. Based on this property, the button can be visually represented by an image (defined by using the ToolbarItemBase.Image property), or text (specified by using the ToolbarItemBase.Text property), or both - using an image with the text.
• CustomToolbarButton.CommandName. Use this property to associate a command name with a button. You can use this command name to respond to item clicks on the client side by using the editor’s ASPxClientHtmlEditor.CustomCommand client event handler.

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

CustomToolbarButton