How to: Create a custom dialog to support different ordered list formats

Aug 01, 2019
4 minutes to read

This example illustrates how to use CustomToolbarButton and HtmlEditorCustomDialog API to create a custom dialog that allows applying different formats for ordered lists.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/aspxhtmleditor-how-to-create-a-custom-dialog-to-support-different-ordered-list-formats-t427238

(function() {
    var currentMenu = null;

    function onHtmlEditorInit(s, e) {
        s.SelectionChanged.AddHandler(function() {
            var selectedElement = s.GetSelection().GetSelectedElement();
            currentMenu = ASPxClientUtils.GetParentByTagName(selectedElement, "OL");
        });
        s.CustomDialogClosing.AddHandler(function(sender, args) {
            if(args.status == "ok")
                setMenuProperties(currentMenu, s);
        });
        s.CustomCommand.AddHandler(function(sender, args) {
            if(args.commandName == "tryShowListProperties") {
                if(!currentMenu)
                    s.ExecuteCommand(ASPxClientCommandConsts.INSERTORDEREDLIST_COMMAND);
                setTimeout(function() {
                    if(currentMenu)
                        s.ExecuteCommand(ASPxClientCommandConsts.CUSTOMDIALOG_COMMAND, "ListProperties");    
                    else
                        alert("selection does not contain an ordered list");
                }, 100);
            }
        });
    }
    function onDialogFormInitialized(s, e) {
        listProperty_compact.SetChecked(parseInt(currentMenu.style.lineHeight) < 100);
        listProperty_start.SetValue(currentMenu.start || 1);
        listProperty_type.SetValue(currentMenu.type || "1");
        listProperty_compact.CheckedChanged.AddHandler(updatePreview);
        listProperty_start.ValueChanged.AddHandler(updatePreview);
        listProperty_type.ValueChanged.AddHandler(updatePreview);
        updatePreview();
    }
    function updatePreview() {
        var menuSample = document.createElement("OL");
        setMenuProperties(menuSample);
        menuSample.innerHTML = "<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>";
        listProperty_preview.SetContentHtml(menuSample.outerHTML);    
    }
    function setMenuProperties(menu, htmlEditor) {
        menu.style.lineHeight = listProperty_compact.GetChecked() ? "80%" : "";
        menu.start = listProperty_start.GetValue();
        menu.type = listProperty_type.GetValue();
        if(htmlEditor)
            htmlEditor.SaveToUndoHistory();
    }

    window.onDialogFormInitialized = onDialogFormInitialized;
    window.onHtmlEditorInit = onHtmlEditorInit;
})()

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class S35859 : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            HtmlEditor1.Html = System.IO.File.ReadAllText(MapPath("~/TestHtml.html"));
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="S35859" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="CustomScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <dx:ASPxHtmlEditor runat="server" ID="HtmlEditor1">
            <ClientSideEvents Init="onHtmlEditorInit" />
            <CustomDialogs>
                <dx:HtmlEditorCustomDialog Caption="ListProperties" Name="ListProperties" FormPath="CustomDialogForm.ascx" />
            </CustomDialogs>
            <Toolbars>
                <dx:HtmlEditorToolbar>
                    <Items>
                        <dx:ToolbarUndoButton></dx:ToolbarUndoButton>
                        <dx:ToolbarRedoButton></dx:ToolbarRedoButton>
                        <dx:CustomToolbarButton BeginGroup="true" CommandName="tryShowListProperties">
                             <Image IconID="format_listbullets_16x16" AlternateText="List Properties"></Image>
                        </dx:CustomToolbarButton>
                    </Items>
                </dx:HtmlEditorToolbar>
            </Toolbars>
        </dx:ASPxHtmlEditor>
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class S35859DialogForm : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
}

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomDialogForm.ascx.cs" Inherits="S35859DialogForm" %>

<dx:ASPxFormLayout runat="server" ColCount="2" Width="500px">
    <ClientSideEvents Init="onDialogFormInitialized" />
    <Items>
        <dx:LayoutItem Caption="Type">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxListBox runat="server" ClientInstanceName="listProperty_type">
                        <Items>
                            <dx:ListEditItem Text="Default. Decimal numbers (1, 2, 3, 4)" Value="1" />
                            <dx:ListEditItem Text="Alphabetically ordered list, lowercase (a, b, c, d)" Value="a" />
                            <dx:ListEditItem Text="Alphabetically ordered list, uppercase (A, B, C, D)" Value="A" />
                            <dx:ListEditItem Text="Roman numbers, lowercase (i, ii, iii, iv)" Value="i" />
                            <dx:ListEditItem Text="Roman numbers, uppercase (I, II, III, IV)" Value="I" />
                        </Items>
                    </dx:ASPxListBox>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem RowSpan="3" ShowCaption="False">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxRoundPanel runat="server" HeaderText="Sample list preview:" Width="100%" Height="160px" ClientInstanceName="listProperty_preview">

                    </dx:ASPxRoundPanel>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem Caption="Start">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxSpinEdit runat="server" Width="100%" ClientInstanceName="listProperty_start"></dx:ASPxSpinEdit>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem ShowCaption="False">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxCheckBox runat="server" Text="Compact" ClientInstanceName="listProperty_compact"></dx:ASPxCheckBox>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
    </Items>
</dx:ASPxFormLayout>

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class S35859
    Inherits System.Web.UI.Page

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then

            HtmlEditor1.Html = System.IO.File.ReadAllText(MapPath("~/TestHtml.html"))
        End If
    End Sub
End Class

Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls

Partial Public Class S35859DialogForm
    Inherits System.Web.UI.UserControl

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    End Sub
End Class

(function() {
    var currentMenu = null;

    function onHtmlEditorInit(s, e) {
        s.SelectionChanged.AddHandler(function() {
            var selectedElement = s.GetSelection().GetSelectedElement();
            currentMenu = ASPxClientUtils.GetParentByTagName(selectedElement, "OL");
        });
        s.CustomDialogClosing.AddHandler(function(sender, args) {
            if(args.status == "ok")
                setMenuProperties(currentMenu, s);
        });
        s.CustomCommand.AddHandler(function(sender, args) {
            if(args.commandName == "tryShowListProperties") {
                if(!currentMenu)
                    s.ExecuteCommand(ASPxClientCommandConsts.INSERTORDEREDLIST_COMMAND);
                setTimeout(function() {
                    if(currentMenu)
                        s.ExecuteCommand(ASPxClientCommandConsts.CUSTOMDIALOG_COMMAND, "ListProperties");    
                    else
                        alert("selection does not contain an ordered list");
                }, 100);
            }
        });
    }
    function onDialogFormInitialized(s, e) {
        listProperty_compact.SetChecked(parseInt(currentMenu.style.lineHeight) < 100);
        listProperty_start.SetValue(currentMenu.start || 1);
        listProperty_type.SetValue(currentMenu.type || "1");
        listProperty_compact.CheckedChanged.AddHandler(updatePreview);
        listProperty_start.ValueChanged.AddHandler(updatePreview);
        listProperty_type.ValueChanged.AddHandler(updatePreview);
        updatePreview();
    }
    function updatePreview() {
        var menuSample = document.createElement("OL");
        setMenuProperties(menuSample);
        menuSample.innerHTML = "<li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li>";
        listProperty_preview.SetContentHtml(menuSample.outerHTML);    
    }
    function setMenuProperties(menu, htmlEditor) {
        menu.style.lineHeight = listProperty_compact.GetChecked() ? "80%" : "";
        menu.start = listProperty_start.GetValue();
        menu.type = listProperty_type.GetValue();
        if(htmlEditor)
            htmlEditor.SaveToUndoHistory();
    }

    window.onDialogFormInitialized = onDialogFormInitialized;
    window.onHtmlEditorInit = onHtmlEditorInit;
})()

<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="S35859" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="CustomScript.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <dx:ASPxHtmlEditor runat="server" ID="HtmlEditor1">
            <ClientSideEvents Init="onHtmlEditorInit" />
            <CustomDialogs>
                <dx:HtmlEditorCustomDialog Caption="ListProperties" Name="ListProperties" FormPath="CustomDialogForm.ascx" />
            </CustomDialogs>
            <Toolbars>
                <dx:HtmlEditorToolbar>
                    <Items>
                        <dx:ToolbarUndoButton></dx:ToolbarUndoButton>
                        <dx:ToolbarRedoButton></dx:ToolbarRedoButton>
                        <dx:CustomToolbarButton BeginGroup="true" CommandName="tryShowListProperties">
                             <Image IconID="format_listbullets_16x16" AlternateText="List Properties"></Image>
                        </dx:CustomToolbarButton>
                    </Items>
                </dx:HtmlEditorToolbar>
            </Toolbars>
        </dx:ASPxHtmlEditor>
    </form>
</body>
</html>

<%@ Control Language="vb" AutoEventWireup="true" CodeFile="CustomDialogForm.ascx.vb" Inherits="S35859DialogForm" %>

<dx:ASPxFormLayout runat="server" ColCount="2" Width="500px">
    <ClientSideEvents Init="onDialogFormInitialized" />
    <Items>
        <dx:LayoutItem Caption="Type">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxListBox runat="server" ClientInstanceName="listProperty_type">
                        <Items>
                            <dx:ListEditItem Text="Default. Decimal numbers (1, 2, 3, 4)" Value="1" />
                            <dx:ListEditItem Text="Alphabetically ordered list, lowercase (a, b, c, d)" Value="a" />
                            <dx:ListEditItem Text="Alphabetically ordered list, uppercase (A, B, C, D)" Value="A" />
                            <dx:ListEditItem Text="Roman numbers, lowercase (i, ii, iii, iv)" Value="i" />
                            <dx:ListEditItem Text="Roman numbers, uppercase (I, II, III, IV)" Value="I" />
                        </Items>
                    </dx:ASPxListBox>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem RowSpan="3" ShowCaption="False">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxRoundPanel runat="server" HeaderText="Sample list preview:" Width="100%" Height="160px" ClientInstanceName="listProperty_preview">

                    </dx:ASPxRoundPanel>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem Caption="Start">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxSpinEdit runat="server" Width="100%" ClientInstanceName="listProperty_start"></dx:ASPxSpinEdit>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
        <dx:LayoutItem ShowCaption="False">
            <LayoutItemNestedControlCollection>
                <dx:LayoutItemNestedControlContainer>
                    <dx:ASPxCheckBox runat="server" Text="Compact" ClientInstanceName="listProperty_compact"></dx:ASPxCheckBox>
                </dx:LayoutItemNestedControlContainer>
            </LayoutItemNestedControlCollection>
        </dx:LayoutItem>
    </Items>
</dx:ASPxFormLayout>

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode