How to: Implement a custom Preview popup

• Sep 22, 2023

The following example illustrates how to implement a custom Preview popup.

JS

function onCloseUp() {
    previewPopup.RefreshContentUrl();
}
function onCustomCommand(commandName) {
    if (commandName == "Preview") {
        previewPopup.Show();
        window.setTimeout("setHtmlInPreviewIFrame()", 800);
    }
}
function setHtmlInPreviewIFrame() {
    var previewIFrameElement = getFrameByIFrameElement(previewPopup.GetContentIFrame());
    var previewIFrameDoc = null;
    if (previewIFrameElement.document)
        previewIFrameDoc = previewIFrameElement.document;
    else
        previewIFrameDoc = previewIFrameElement.contentDocument
        previewIFrameDoc.body.innerHTML = ASPxHtmlEditor1.GetHtml();
    }
function getFrameByIFrameElement(iframeElement) {
    var name = (new Date()).toString();
    iframeElement.contentWindow.name = name;
    var frameIndex = getFrameByWindowName(name);
    return window.frames[frameIndex];
}
function getFrameByWindowName(name) {
    var count = window.top.frames.length;
    for (var i = 0; i < count; i++) {
        if (window.top.frames[i].window.name === name)
        return i;
    }
    return -1;
}

ASPX

<dx:ASPxHtmlEditor ID="ASPxHtmlEditor1" runat="server" ...>
    ...    
    <Toolbars>
    ...
    </Toolbars>
    <ClientSideEvents CustomCommand="function(s, e) { onCustomCommand(e.commandName); }" />
</dx:ASPxHtmlEditor>
<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server"
    ClientInstanceName="previewPopup" Modal="True" Height="340px"
    Width="724px" AllowDragging="True" HeaderText="Preview"
    PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter"
    ContentUrl="~/PreviewDocument.htm" AllowResize="True"
    FooterText="Resize window" ShowFooter="True">
    <ClientSideEvents CloseUp="function(s, e) { onCloseUp(); }" />
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>