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.