How to: Set up a custom font dialog

Aug 01, 2019
6 minutes to read

This sample is based upon the ideas from sample Implementing custom commands and dialogs. It illustrates how to replace the default ToolbarParagraphFormattingEdit, ToolbarFontNameEdit and ToolbarFontSizeEdit buttons of your ASPxHtmlEditor by a single nice-looking dialog.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-set-up-a-custom-font-dialog-e1934

using System;

namespace HtmlEditorCustomFontDialog.UserControls {
    public partial class CustomFontDialog : System.Web.UI.UserControl {
        protected void Page_Load(object sender, EventArgs e) {
            pcCustomFontDialog.PopupElementID = HtmlEditorID;
            hf["HtmlEditorID"] = HtmlEditorID;
            hf["PopupID"] = pcCustomFontDialog.ClientID;
        }

        public string HtmlEditorID {
            get { return (string)ViewState["HtmlEditorID"]; }
            set { ViewState["HtmlEditorID"] = value; }
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="HtmlEditorCustomFontDialog._Default" %>

<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dxcp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <script type="text/javascript">
            function OnCustomCommand(s, e) {
                if(e.commandName == "OpenCustomFontDialog")
                    OpenCustomFontDialog();
            }
            function OnBeginCallback(s, e) {
                if(window.__customFontDialog)
                    window.__customFontDialog.Hide();
            }

            function OpenCustomFontDialog() {
                if(!window.__customFontDialogReceived) {
                    cpCustomFontDialogContainer.PerformCallback();
                    window.__customFontDialogReceived = true;
                } else
                    OpenCustomFontDialogCore();
            }
            function OnCustomFontDialogContainerEndCallback(s, e) {
                OpenCustomFontDialogCore();
            }
            function OpenCustomFontDialogCore() {
                htmlEditor.SaveSelectionForPopup();
                __customFontDialog.Show();
            }
        </script>

        <dxhe:ASPxHtmlEditor ID="heHtmlEditor1" runat="server" ClientInstanceName="htmlEditor">
            <ClientSideEvents CustomCommand="OnCustomCommand" BeginCallback="OnBeginCallback" />
            <Toolbars>
                <dxhe:CustomToolbar>
                    <Items>
                        <dxhe:ToolbarBoldButton />
                        <dxhe:ToolbarItalicButton />
                        <dxhe:CustomToolbarButton CommandName="OpenCustomFontDialog" ToolTip="Change Font" ViewStyle="Image">
                            <Image Url="~/i/OpenCustomFontDialog.png" Width="16px" Height="16px" />
                        </dxhe:CustomToolbarButton>
                        <dxhe:ToolbarJustifyLeftButton BeginGroup="True" />
                        <dxhe:ToolbarJustifyCenterButton />
                        <dxhe:ToolbarJustifyRightButton />
                        <dxhe:ToolbarJustifyFullButton />
                    </Items>
                </dxhe:CustomToolbar>
            </Toolbars>
        </dxhe:ASPxHtmlEditor>

        <dxcp:ASPxCallbackPanel ID="cpCustomFontDialogContainer" runat="server"
            ClientInstanceName="cpCustomFontDialogContainer" OnCallback="OnCustomFontDialogContainerCallback" ShowLoadingPanel="false" Style="z-index: 49999;">
            <ClientSideEvents EndCallback="OnCustomFontDialogContainerEndCallback" />
        </dxcp:ASPxCallbackPanel>

    </div>
    </form>
</body>
</html>

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CustomFontDialog.ascx.cs" Inherits="HtmlEditorCustomFontDialog.UserControls.CustomFontDialog" %>

<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dxhf" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dxpc" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>

<script id="dxss_" type="text/javascript">
    function __OnOKButtonClick(s, e) {
        var htmlEditorID = __GetHiddenField(s).Get("HtmlEditorID");
        var htmlEditor = __GetControlByID(htmlEditorID);

        htmlEditor.RestoreSelectionForPopup();

        var fontSize = __GetEditor(s, "spnFontSize").GetValue();
        if(fontSize)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTSIZE_COMMAND, fontSize, true /* addToHistory */);

        var fontName = __GetEditor(s, "cmbFontName").GetText();
        if(fontName)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTNAME_COMMAND, fontName, true);

        var fontColor = __GetEditor(s, "clrFontColor").GetValue();
        if(fontColor)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTCOLOR_COMMAND, fontColor, true);

        __HideDialog(s);
    }
    function __OnCancelButtonClick(s, e) {
        __HideDialog(s);
    }

    function __HideDialog(requester) {
        var popupID = __GetHiddenField(requester).Get("PopupID")
        __GetControlByID(popupID).Hide();
    }
    function __GetEditor(requester, editorID) {
        var editorID = __GetIDPrefix(requester) + editorID;
        return __GetControlByID(editorID);
    }
    function __GetHiddenField(requester) {
        var hiddenFieldID = __GetIDPrefix(requester) + "hf";
        return __GetControlByID(hiddenFieldID);
    }
    function __GetIDPrefix(requester) {
        return requester.name.substr(0, requester.name.lastIndexOf('_') + 1);
    }
    function __GetControlByID(controlID) {
        return ASPxClientControl.GetControlCollection().Get(controlID);
    }
</script>

<dxpc:ASPxPopupControl ID="pcCustomFontDialog" runat="server" ClientInstanceName="__customFontDialog"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" HeaderText="Font Settings" PopupAction="None">
    <ContentCollection>
        <dxpc:PopupControlContentControl runat="server">

            <dxhf:ASPxHiddenField ID="hf" runat="server" SyncWithServer="false" />

            <table>
                <tr>
                    <td>
                        Font&nbsp;Name:
                    </td>
                    <td>
                        <dxe:ASPxComboBox ID="cmbFontName" runat="server" Width="170px">
                            <Items>
                                <dxe:ListEditItem Text="" />
                                <dxe:ListEditItem Text="Times New Roman" />
                                <dxe:ListEditItem Text="Tahoma" />
                                <dxe:ListEditItem Text="Verdana" />
                                <dxe:ListEditItem Text="Arial" />
                                <dxe:ListEditItem Text="MS Sans Serif" />
                                <dxe:ListEditItem Text="Courier" />
                            </Items>
                        </dxe:ASPxComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Size:
                    </td>
                    <td>
                        <dxe:ASPxSpinEdit ID="spnFontSize" runat="server" MinValue="1" MaxValue="10" Width="170px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Color:
                    </td>
                    <td>
                        <dxe:ASPxColorEdit ID="clrFontColor" runat="server" Width="170px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <table cellpadding="0" cellspacing="0" style="margin-top: 8px;">
                            <tr>
                                <td>
                                    <dxe:ASPxButton ID="btnOK" runat="server" Text="OK" Width="83px"
                                        AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
                                        <ClientSideEvents Click="__OnOKButtonClick" />
                                    </dxe:ASPxButton>
                                </td>
                                <td style="padding-left: 4px;">
                                    <dxe:ASPxButton ID="btnCancel" runat="server" Text="Cancel" Width="83px"
                                        AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
                                        <ClientSideEvents Click="__OnCancelButtonClick" />
                                    </dxe:ASPxButton>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </dxpc:PopupControlContentControl>
    </ContentCollection>
</dxpc:ASPxPopupControl>

using System;
using DevExpress.Web.ASPxClasses;
using DevExpress.Web.ASPxCallbackPanel;
using HtmlEditorCustomFontDialog.UserControls;

namespace HtmlEditorCustomFontDialog {
    public partial class _Default : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void OnCustomFontDialogContainerCallback(object sender, CallbackEventArgsBase e) {
            CustomFontDialog dialog = (CustomFontDialog)LoadControl("~/UserControls/CustomFontDialog.ascx");
            dialog.HtmlEditorID = heHtmlEditor1.ClientID;
            ((ASPxCallbackPanel)sender).Controls.Add(dialog);
        }
    }
}

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" Inherits="HtmlEditorCustomFontDialog._Default" %>

<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxLoadingPanel" TagPrefix="dxlp" %>
<%@ Register Assembly="DevExpress.Web.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxCallbackPanel" TagPrefix="dxcp" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>
<%@ Register Assembly="DevExpress.Web.ASPxSpellChecker.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxSpellChecker" TagPrefix="dxwsc" %>
<%@ Register Assembly="DevExpress.Web.ASPxHtmlEditor.v9.2, Version=9.2.9.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
        Namespace="DevExpress.Web.ASPxHtmlEditor" TagPrefix="dxhe" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <script type="text/javascript">
            function OnCustomCommand(s, e) {
                if(e.commandName == "OpenCustomFontDialog")
                    OpenCustomFontDialog();
            }
            function OnBeginCallback(s, e) {
                if(window.__customFontDialog)
                    window.__customFontDialog.Hide();
            }

            function OpenCustomFontDialog() {
                if(!window.__customFontDialogReceived) {
                    cpCustomFontDialogContainer.PerformCallback();
                    window.__customFontDialogReceived = true;
                } else
                    OpenCustomFontDialogCore();
            }
            function OnCustomFontDialogContainerEndCallback(s, e) {
                OpenCustomFontDialogCore();
            }
            function OpenCustomFontDialogCore() {
                htmlEditor.SaveSelectionForPopup();
                __customFontDialog.Show();
            }
        </script>

        <dxhe:ASPxHtmlEditor ID="heHtmlEditor1" runat="server" ClientInstanceName="htmlEditor">
            <ClientSideEvents CustomCommand="OnCustomCommand" BeginCallback="OnBeginCallback" />
            <Toolbars>
                <dxhe:CustomToolbar>
                    <Items>
                        <dxhe:ToolbarBoldButton />
                        <dxhe:ToolbarItalicButton />
                        <dxhe:CustomToolbarButton CommandName="OpenCustomFontDialog" ToolTip="Change Font" ViewStyle="Image">
                            <Image Url="~/i/OpenCustomFontDialog.png" Width="16px" Height="16px" />
                        </dxhe:CustomToolbarButton>
                        <dxhe:ToolbarJustifyLeftButton BeginGroup="True" />
                        <dxhe:ToolbarJustifyCenterButton />
                        <dxhe:ToolbarJustifyRightButton />
                        <dxhe:ToolbarJustifyFullButton />
                    </Items>
                </dxhe:CustomToolbar>
            </Toolbars>
        </dxhe:ASPxHtmlEditor>

        <dxcp:ASPxCallbackPanel ID="cpCustomFontDialogContainer" runat="server"
            ClientInstanceName="cpCustomFontDialogContainer" OnCallback="OnCustomFontDialogContainerCallback" ShowLoadingPanel="false" Style="z-index: 49999;">
            <ClientSideEvents EndCallback="OnCustomFontDialogContainerEndCallback" />
        </dxcp:ASPxCallbackPanel>

    </div>
    </form>
</body>
</html>

Imports Microsoft.VisualBasic
Imports System
Imports DevExpress.Web.ASPxClasses
Imports DevExpress.Web.ASPxCallbackPanel
Imports HtmlEditorCustomFontDialog.UserControls

Namespace HtmlEditorCustomFontDialog
    Partial Public Class _Default
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub

        Protected Sub OnCustomFontDialogContainerCallback(ByVal sender As Object, ByVal e As CallbackEventArgsBase)
            Dim dialog As CustomFontDialog = CType(LoadControl("~/UserControls/CustomFontDialog.ascx"), CustomFontDialog)
            dialog.HtmlEditorID = heHtmlEditor1.ClientID
            CType(sender, ASPxCallbackPanel).Controls.Add(dialog)
        End Sub
    End Class
End Namespace

<%@ Control Language="vb" AutoEventWireup="true" CodeBehind="CustomFontDialog.ascx.vb" Inherits="HtmlEditorCustomFontDialog.UserControls.CustomFontDialog" %>

<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxHiddenField" TagPrefix="dxhf" %>
<%@ Register Assembly="DevExpress.Web.v9.2" Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dxpc" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v9.2" Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dxe" %>

<script id="dxss_" type="text/javascript">
    function __OnOKButtonClick(s, e) {
        var htmlEditorID = __GetHiddenField(s).Get("HtmlEditorID");
        var htmlEditor = __GetControlByID(htmlEditorID);

        htmlEditor.RestoreSelectionForPopup();

        var fontSize = __GetEditor(s, "spnFontSize").GetValue();
        if(fontSize)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTSIZE_COMMAND, fontSize, true /* addToHistory */);

        var fontName = __GetEditor(s, "cmbFontName").GetText();
        if(fontName)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTNAME_COMMAND, fontName, true);

        var fontColor = __GetEditor(s, "clrFontColor").GetValue();
        if(fontColor)
            htmlEditor.ExecuteCommand(ASPxClientCommandConsts.FONTCOLOR_COMMAND, fontColor, true);

        __HideDialog(s);
    }
    function __OnCancelButtonClick(s, e) {
        __HideDialog(s);
    }

    function __HideDialog(requester) {
        var popupID = __GetHiddenField(requester).Get("PopupID")
        __GetControlByID(popupID).Hide();
    }
    function __GetEditor(requester, editorID) {
        var editorID = __GetIDPrefix(requester) + editorID;
        return __GetControlByID(editorID);
    }
    function __GetHiddenField(requester) {
        var hiddenFieldID = __GetIDPrefix(requester) + "hf";
        return __GetControlByID(hiddenFieldID);
    }
    function __GetIDPrefix(requester) {
        return requester.name.substr(0, requester.name.lastIndexOf('_') + 1);
    }
    function __GetControlByID(controlID) {
        return ASPxClientControl.GetControlCollection().Get(controlID);
    }
</script>

<dxpc:ASPxPopupControl ID="pcCustomFontDialog" runat="server" ClientInstanceName="__customFontDialog"
    PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" HeaderText="Font Settings" PopupAction="None">
    <ContentCollection>
        <dxpc:PopupControlContentControl runat="server">

            <dxhf:ASPxHiddenField ID="hf" runat="server" SyncWithServer="false" />

            <table>
                <tr>
                    <td>
                        Font&nbsp;Name:
                    </td>
                    <td>
                        <dxe:ASPxComboBox ID="cmbFontName" runat="server" Width="170px">
                            <Items>
                                <dxe:ListEditItem Text="" />
                                <dxe:ListEditItem Text="Times New Roman" />
                                <dxe:ListEditItem Text="Tahoma" />
                                <dxe:ListEditItem Text="Verdana" />
                                <dxe:ListEditItem Text="Arial" />
                                <dxe:ListEditItem Text="MS Sans Serif" />
                                <dxe:ListEditItem Text="Courier" />
                            </Items>
                        </dxe:ASPxComboBox>
                    </td>
                </tr>
                <tr>
                    <td>
                        Size:
                    </td>
                    <td>
                        <dxe:ASPxSpinEdit ID="spnFontSize" runat="server" MinValue="1" MaxValue="10" Width="170px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Color:
                    </td>
                    <td>
                        <dxe:ASPxColorEdit ID="clrFontColor" runat="server" Width="170px" />
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <table cellpadding="0" cellspacing="0" style="margin-top: 8px;">
                            <tr>
                                <td>
                                    <dxe:ASPxButton ID="btnOK" runat="server" Text="OK" Width="83px"
                                        AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
                                        <ClientSideEvents Click="__OnOKButtonClick" />
                                    </dxe:ASPxButton>
                                </td>
                                <td style="padding-left: 4px;">
                                    <dxe:ASPxButton ID="btnCancel" runat="server" Text="Cancel" Width="83px"
                                        AutoPostBack="false" UseSubmitBehavior="false" CausesValidation="false">
                                        <ClientSideEvents Click="__OnCancelButtonClick" />
                                    </dxe:ASPxButton>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </dxpc:PopupControlContentControl>
    </ContentCollection>
</dxpc:ASPxPopupControl>

Imports Microsoft.VisualBasic
Imports System

Namespace HtmlEditorCustomFontDialog.UserControls
    Partial Public Class CustomFontDialog
        Inherits System.Web.UI.UserControl
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            pcCustomFontDialog.PopupElementID = HtmlEditorID
            hf("HtmlEditorID") = HtmlEditorID
            hf("PopupID") = pcCustomFontDialog.ClientID
        End Sub

        Public Property HtmlEditorID() As String
            Get
                Return CStr(ViewState("HtmlEditorID"))
            End Get
            Set(ByVal value As String)
                ViewState("HtmlEditorID") = value
            End Set
        End Property
    End Class
End Namespace

Was this page helpful?

Thanks for your feedback!

How can we improve this help topic?

Add an example/code snippet.

Improve topic clarity.

Improve organization/make it easier to find.

Include additional information/content.

Additional comments/thoughts:

If you have any questions, submit a ticket to our Support Center.

Your feedback is appreciated.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode