Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / Editor / Setting dialog pop up position

Setting dialog pop up position

Article Info

Rating: Not rated

Article information

Article relates to

RadEditor for ASP.NET AJAX
Telerik.Web.UI 

Created by

Rumen Zhekov


HOW-TO
How to set dialog pop up position

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 commandName = args.get_commandName();
  
   //extend the list to match used dialogs
   if (commandName == "ImageManager"
    || commandName == "DocumentManager"
    || commandName == "TableWizard"
    || commandName == "MediaManager"
    || commandName == "LinkManager"
    || commandName == "TemplateManager") 
    {
       //get reference to RadWindow dialog
       var dialogWindow = sender.get_dialogOpener()._dialogContainers[commandName];
       //use the moveTo method of RadWindow to position the dialog
       dialogWindow.moveTo(300, 300);  
   }
}
</script>
<telerik:RadEditor ID="RadEditor" OnClientCommandExecuted="OnClientCommandExecuted" runat="server"></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.

Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.