Setting dialog pop up position of RadEditor

HOW-TO

Setting dialog pop up position of RadEditor

DESCRIPTION

The built-in and custom dialogs of RadEditor always pop up at the center of the page. The code solution below demonstrates how to load the editor's dialogs at the desired position on the page.

SOLUTION

1) for built-in dialogs:

<script type="text/javascript">
    function OnClientCommandExecuted(sender, args) {
        var dialogWindow,
            isIframe,
            commandName = args.get_commandName();

        switch (commandName) {
            case "PasteAsHtml":
            case "PasteFromWord":
            case "PasteFromWordNoFontsNoSizes":
                commandName = "CleanPasteHtmlContent";
                break;
            case "PastePlainText":
                commandName = "CleanPasteTextContent";
                break;
            case "InsertFormSelect":
                commandName = "InsertSelectDialog";
                break;
            case "SetImageProperties":
                commandName = "ImageProperties";
                break;
            case "SetCellProperties":
            case "SetTableProperties":
                commandName = "TableWizard";
                break;
            case "SetLinkProperties":
                commandName = "LinkManager";
                break;
            default:
        }

        dialogWindow = sender.get_dialogOpener()._dialogContainers[commandName];

        if (dialogWindow) {
            isIframe = dialogWindow.get_contentFrame();

            if (isIframe) {
                dialogWindow.add_pageLoad(moveDialog);
            }
            else
                moveDialog(dialogWindow);
        }
    }

    function moveDialog(sender) {
        sender.moveTo(0, 0);
        sender.set_reloadOnShow(true);
        sender.remove_pageLoad(moveDialog);
    }
</script>

<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuted="OnClientCommandExecuted">
</telerik:RadEditor>

2) for custom dialogs: Use the getRadWindow() method to get a reference to the RadWindow custom dialog in it InitDialog function and set its moveTo method to position the dialog on the page:

<script type="text/javascript">
if (window.attachEvent)
{
    window.attachEvent("onload", initDialog);
}
else if (window.addEventListener)
{
    window.addEventListener("load", initDialog, false);
}

function getRadWindow()
{
       if (window.radWindow)
    {
        return window.radWindow;
    }
    if (window.frameElement && window.frameElement.radWindow)
    {
        return window.frameElement.radWindow;
    }
    return null;
}

function initDialog()
{
    getRadWindow().moveTo(300, 300);   

}
</script>

This code should be placed in the ASPX dialog page loaded through the showExternalDialog method

showExternalDialog(url (aspx/html file), argument, width, height, callbackFunction, callbackArgs, title, modal, behaviors, showStatusbar, showTitlebar);

More information is available in this live demo: Custom Dialogs.