[Solved] Position of Custom Dialog

[Andy Byrne]

Hi,

I have an instance of a RAD editor where we are opening a custom dialog.  Is there a way to set the x and y position on the screen where the window is located?

            editor.showExternalDialog(
            'FlyerSectionEditor.aspx',
            args,
            925,
            675,
            sectionEditorCallback,
            null,
            'Add Item Section',
            true,
            Telerik.Web.UI.WindowBehaviors.Default,
            true,
            true);

Thanks,
Andy

[Dobromir]

Hi Andy,

RadEditor uses RadWindow for it's dialogs and they can be manipulated via RadWindow client-side methods. The following example will move the dialog to position 10,20 (this code is inside dialog's ascx file)

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() {
    var oWindow = getRadWindow();
    oWindow.moveTo(10, 20); //move window to (left, top)
    .....
}

Best wishes,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

Dobromir,

I'm not sure what you mean by "this code is inside dialog's ascx file".  Where do I call this code from?  Does this JavaScript already exist somewhere or do I need to add it to the aspx page containing the editor?

It looks like I will have to call InitDialog from somewhere, but I'm not sure where or how I indicate that it is connected with the custom dialog.

Thanks,
Andy

[Dobromir]

Hi Andy,

I am really sorry for not being clear enough in my first post.

By "this code is inside dialog's ascx file" I meant that the sample code should be placed in the custom dialog's source code (in your scenario 'FlyerSectionEditor.aspx') or the current code should be modified.
initDialog() is the function that is called on the window.onload event (note the first lines of the sample code provided in the previous post) to initialize the dialog with the arguments supplied from the parent page, in your scenario it might be named differently.

For the provided sample code I modified the demo example : Editor / Custom Dialogs to match the requested functionality.

Best regards,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

I copied and pasted the JavaScript provided and it is having no effect on the position of the custom dialog.  I am pasting the page here:

<%@ Page Language="C#" MasterPageFile="~/ECIMasterPage.master" AutoEventWireup="true"
    CodeFile="Flyer.aspx.cs" Inherits="Flyer" Title="Flyer Management" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="Telerik" %>
<%@ Register Assembly="ECI.WebControls" Namespace="ECI.WebControls" TagPrefix="eci" %>
<%@ Register Src="~/Controls/SessionBreadcrumbs.ascx" TagName="SessionBreadcrumbs" TagPrefix="scrumbs" %>
<%@ MasterType VirtualPath="~/ECIMasterPage.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CPH1" runat="Server">

    <script language="javascript" type="text/javascript">
        function OnClientClose(oWnd,args)
        {
            //get the transferred arguments
            var arg = args.get_argument();
            if(arg)
            {
                __doPostBack("btnRefreshTokens",arg.sectionToken);
            }
        }
        function OnSendEmailClose(oWnd,args)
        {
            //get the transferred arguments
            var arg = args.get_argument();
            if(arg)
            {
                __doPostBack("btnSendEmail",arg.recipientList);
            }
        }
        function OnClientCommandExecuting(editor, args)
        {
            var name = args.get_name();
            var val = args.get_value();
            var tool = args.get_tool();
            switch (name)
            {
                case "ContentProvider":
                    var current = document.getElementById("<%=CurrentContentProvider.ClientID%>");
                    current.value = val;
                    tool.set_text(val);
                    //Cancel the further execution of the command as such a command does not exist in the editor command list
                    args.set_cancel(true);
                    break;
            }
        }

        function setProvider(combo)
        {
            var current = document.getElementById("<%=CurrentContentProvider.ClientID%>");
            current.value = combo.value;

        }

        Telerik.Web.UI.Editor.CommandList["AddSection"] = function(commandName, editor, args)
        {
           var selElement = editor.getSelectedElement(); //or selection.getParentElement()
           var selItem = selElement.attributes.getNamedItem("name");
            if (selItem != null && selItem.value == "itemContent")
            {
                var args = selElement.innerText; //returns the HTML of the selection.
                //alert("In the token: " + selElement.innerText);
            }
            else
            {
                var args = ""; //returns the HTML of the selection.
                //alert("Not currently in a token");
            }

            var sectionEditorCallback = function(sender, args)
            {
                var currentElement = editor.getSelectedElement();
                var item = currentElement.attributes.getNamedItem("name");
                if (item != null && item.value == "itemContent")
                {
                    currentElement.outerHTML = args.sectionToken;
                }
                else
                {
                    editor.pasteHtml(args.sectionToken);
                }
            }

            editor.showExternalDialog(
            'FlyerSectionEditor.aspx',
            args,
            925,
            675,
            sectionEditorCallback,
            null,
            'Add Item Section',
            true,
            Telerik.Web.UI.WindowBehaviors.Default,
            true,
            true);
        };

        //******************* COPIED CODE HERE***************************
        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() {
            var oWindow = getRadWindow();
            oWindow.moveTo(10, 20); //move window to (left, top)
        }
        //******************* END COPIED CODE***************************

        function OnClientLoad(editor, args)
        {
           var currentText = editor.get_text();
           if (currentText != null && currentText.length > 0)
           {
               var contentProvider = document.getElementById("<%=CurrentContentProvider.ClientID%>");
               var returnValue = GetContent(editor);
               var tool = editor.getToolByName("ContentProvider");
               if (tool)
                   tool.set_text(contentProvider.value);
           }
           editor.add_modeChange(function(sender, args)
           {
               var mode = sender.get_mode();
               var current = document.getElementById("<%=currentHtml.ClientID%>");
               switch (mode)
               {
                  case 1:
                  if (current.value != '')
                  {
                    sender.set_html(current.value);
                    current.value = '';
                  }
                   //alert( "We are in Design mode");
                   //do something
                   break;
                  case 2:
                   if (current.value != '')
                  {
                    sender.set_html(current.value);
                    current.value = '';
                  }
                   //alert( "We are in Html mode");
                   //do something
                   break;
                  case 4:
                   ret = GetContent(sender);
                   //do something
                   break;
              }
           });
           editor.get_filtersManager().add(new MyFilter());
        }
        MyFilter = function()
        {
           MyFilter.initializeBase(this);
           this.set_isDom(false);
           this.set_enabled(true);
           this.set_name("RadEditor filter");
           this.set_description("RadEditor filter description");
        }
        MyFilter.prototype =
        {
           getHtmlContent : function(content)
           {
             //alert('Html');
             var newContent = content;
             //Make changes to the content and return it
             //newContentnewContent = newContent.toUpperCase();
             return newContent;
           },

           getDesignContent : function(content)
           {
             //alert('Design');
             var newContent = content;
             //Make changes to the content and return it
             //newContentnewContent = newContent.toLowerCase();
             return newContent;
           },

           getPreviewContent : function(content)
           {
             //alert('Save current html - ' + content);
             //alert('Add Content to Preview with a call back before it is rendered');
             var newContent = content;
             return newContent;
           }
        }

        function GetContent(arg)
        {
             var current = document.getElementById("<%=currentHtml.ClientID%>");
             var content = document.getElementById("<%=CurrentContentProvider.ClientID%>");

             if (current.value == '')
             {
                current.value = arg.get_html(true);
                arg.set_html("<b>Please wait while we get " + content.value + " content.</b>");
                CallServer("[<" + content.value + ">]!" + current.value, "");
             }

        }

        function ReceiveServerData(rValue)
        {
            var editor = $find("<%=fldHtmlEditor.ClientID%>");
            editor.set_html(rValue);
            editor.set_mode(4);
        }

        function ClearCurrentHtml()
        {
            var current = document.getElementById("<%=currentHtml.ClientID%>");
            if (current.value != '')
            {
                var editor = $find("<%=fldHtmlEditor.ClientID%>");
                editor.set_html(current.value);
                current.value = '';
            }
        }

        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);

    </script>

    <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
        ReloadOnShow="true" runat="server" Skin="Sunset">
        <Windows>
            <telerik:RadWindow ID="winNewSection" runat="server" OpenerElementID="fldItems_ctl00_ctl02_ctl00_lnkNew"
                Modal="true" OnClientClose="OnClientClose" NavigateUrl="flyersectioneditor.aspx"
                Width="925px" Height="675px">
            </telerik:RadWindow>
            <telerik:RadWindow ID="winTestEmail" runat="server" OpenerElementID="btnSendTest"
                Modal="true" OnClientClose="OnSendEmailClose" Width="500px" Height="400px">
            </telerik:RadWindow>
            <telerik:RadWindow ID="winNewTemplate" runat="server" OpenerElementID="fldItems_ctl00_ctl02_ctl00_lnkNew"
                Modal="true" OnClientClose="OnClientClose" NavigateUrl="flyersectioneditor.aspx"
                Width="800px" Height="650px">
            </telerik:RadWindow>
            <telerik:RadWindow ID="winOpenTemplate" runat="server" OpenerElementID="fldItems_ctl00_ctl02_ctl00_lnkNew"
                Modal="true" OnClientClose="OnClientClose" NavigateUrl="FlyerTemplateOpen.aspx"
                Width="800px" Height="650px">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>

    <asp:HiddenField ID="currentHtml" runat="server" />
    <asp:HiddenField ID="CurrentContentProvider" runat="server" Value="United" />
      <scrumbs:SessionBreadcrumbs runat="server" ID="SessionCrumbs" Subsystem="Flyer" PageName="FlyerEditor" DisplayName="Flyer Editor"/>
  <br />
    <br />
    <span style="font-size: 11pt; font-family: Arial;">
    <b><asp:Literal ID="lFlyerAction" runat="server" Text="Editing" /> <asp:Literal ID="lFlyerType" runat="server" Text="Template" />:</b> <asp:Literal ID="lFlyerName" runat="server" Text="New Flyer Template" /></span>
    <br /><br />&nbsp;&nbsp;<asp:Literal ID="lMsg" runat="server" Visible="false" />
    <table width="682" style="background-color: #EEEEEE; color: Black; font-family: Verdana; border: solid 1px #cccccc">
    <tr>
        <td>
            <asp:LinkButton ID="bSave" runat="server" ToolTip="Save" Style="font-family: Verdana; font-weight: normal; font-size:8pt; text-decoration: none;">
                <asp:Image ID="imgSave" runat="server" ImageUrl="~/App_Themes/Default/Buttons/saveicon.gif" /><span style="vertical-align:top;"> Save</span></asp:LinkButton>
            &nbsp;&nbsp;<asp:LinkButton ID="bSaveAsCampaign" runat="server" ToolTip="Create a New Campaign from this Flyer" Style="font-family: Verdana; font-weight: normal; font-size:8pt; text-decoration: none;">
                <asp:Image ID="imgSaveAsCampaign" runat="server" ImageUrl="~/App_Themes/Default/Buttons/copyicon.gif" /><span style="vertical-align:top;">Save As New Campaign</span></asp:LinkButton>
            &nbsp;&nbsp;<asp:LinkButton ID="bSaveAsTemplate" runat="server" ToolTip="Create a New Template from this Flyer" Style="font-family: Verdana; font-weight: normal; font-size:8pt; text-decoration: none;">
                <asp:Image ID="imgSaveAsTemplate" runat="server" ImageUrl="~/App_Themes/Default/Buttons/copyicon.gif" /><span style="vertical-align:top;">Save As New Template</span></asp:LinkButton>
        </td>
    </tr>
    </table>
    <telerik:RadTabStrip ID="rtsFlyerTabs" runat="server" Skin="Office2007" MultiPageID="rmpFlyerPages"
        SelectedIndex="0" CssClass="tabStrip" Width="682">
        <Tabs>
            <telerik:RadTab Text="Details" Value="0" />
            <telerik:RadTab Text="Content" Value="1" />
            <telerik:RadTab Text="Test Email" Value="2" />
            <telerik:RadTab Text="Schedule" Value="3" Visible="false" />
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage ID="rmpFlyerPages" runat="server" SelectedIndex="0">
        <telerik:RadPageView ID="rpvDetails" runat="server">
            <table width="682" style="background-color: #ddeeff; color: Black; font-family: Verdana;">
                <tr>
                    <td align="right">
                        <asp:Literal ID="lName" runat="server">Flyer Template Name:</asp:Literal>
                        <label></label>
                    </td>
                    <td>
                        <asp:TextBox ID="tFlyerName" runat="server" Text="Type Flyer Template Name Here" MaxLength="50" Width="300" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Literal ID="lDescription" runat="server">Description:</asp:Literal>
                    </td>
                    <td>
                        <asp:TextBox ID="tFlyerDescription" runat="server" Rows="3" TextMode="MultiLine"
                            Text="Enter Flyer Template Description Here" Width="300px" MaxLength="255" Style="font-family: Verdana;" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Literal ID="lEmailSubject" runat="server">Email Subject:</asp:Literal>
                    </td>
                    <td>
                        <asp:TextBox ID="tEmailSubject" runat="server" MaxLength="50" Width="300" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Literal ID="lRecipients" runat="server">Recipient List:</asp:Literal>
                    </td>
                    <td>
                        <Telerik:RadComboBox ID="rcbRecipients" runat="server" EmptyMessage="No Recipient Lists"
                         DataSourceID="dsRecipientList" DataTextField="Name" DataValueField="FlyerRecipientSearchID"
                         AccessibilityMode="true" Skin="Office2007" />
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rpvContent" runat="server">
            <telerik:RadEditor ID="fldHtmlEditor" runat="server" ToolbarMode="default" Height="600px"
                OnClientCommandExecuting="OnClientCommandExecuting" OnClientLoad="OnClientLoad"
                OnClientSubmit="ClearCurrentHtml" Skin="Office2007">
            </telerik:RadEditor>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rpvTestEmail" runat="server">
            <table width="682" style="background-color: #ddeeff; color: Black; font-family: Verdana;">
                <tr>
                    <td align="right">
                        <asp:Literal ID="lTestEmailAddress" runat="server">Send Test Flyer to Email Address:</asp:Literal>
                    </td>
                    <td>
                        <asp:TextBox ID="tTestEmailAddress" runat="server" MaxLength="255" Width="200" />&nbsp;
                        <asp:ImageButton ID="bTestEmail" runat="server" style="vertical-align: bottom;" ImageUrl="~/App_themes/default/buttons/go_r.gif" />
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
        <telerik:RadPageView ID="rpvSchedule" runat="server">
            <table width="682" style="background-color: #ddeeff; color: Black; font-family: Verdana;">
                <tr>
                    <td align="right">
                        <asp:Literal ID="lStartDate" runat="server">Start Date:</asp:Literal>
                    </td>
                    <td>
                        <telerik:RadDatePicker ID="rcBeginDate" runat="server" Skin="Office2007" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <asp:Literal ID="lExpDate" runat="server">Expiration Date:</asp:Literal>
                    </td>
                    <td>
                        <telerik:RadDatePicker ID="rcEndDate" runat="server" Skin="Office2007" />
                    </td>
                </tr>
            </table>
        </telerik:RadPageView>
    </telerik:RadMultiPage>
    <table width="682" style="background-color: #EEEEEE; color: Black; font-family: Verdana; border: solid 1px #cccccc">
    <tr>
        <td>
            &nbsp;
        </td>
    </tr>
    </table>

    <eci:TracedSqlDataSource ID="dsRecipientList" runat="server" ConnectionString="<%$ ConnectionStrings:ECI2Main %>"
         SelectCommand="[dbo].[usp_FlyerRecipientSearchGetList]" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:SessionParameter Name="SiteID" SessionField="SiteID" />
        </SelectParameters>
    </eci:TracedSqlDataSource>
</asp:Content>

[Dobromir]

Hi Andy,

The page that you have provided is the page that contains RadEditor and the example code should be inside the custom dialog page (your custom dialog page is FlyerSectionEditor.aspx).

For your convenience I have attached a sample project with custom dialog positioned to coordinates 10,20.

If you have problems implementing the suggestion, please open a support ticket and send us a small sample project that we could run locally. We will check and modify it according to our suggestions.

Greetings,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Andy Byrne]

Thanks that did it.

Andy

[Andy Byrne]

The code provided positions the RADWindow and if I attempt to close the RADWindow immediately afterwards I am able to.  However when we perform some action on the page the RADWindow will not close.  This action calls the following code:

                function returnToEditor(sender, eventArgs)
                {
                    //create the argument that will be returned to the parent page
                    var oArg = new Object();
                   // oArg.sectionToken = document.getElementById("fldToken").value;
                    oArg.sectionToken = document.getElementById('<%=fldToken.ClientID%>').value;
                    //get a reference to the current RadWindow
                    var oWnd = getRadWindowForPosition();
                    //Close the RadWindow and send the argument to the parent page
                    if(oArg.sectionToken)
                    {
                        oWnd.close(oArg);
                    }
                    else
                    {
                        alert("Error creating item token");
                    }
                }

Once this code runs it is supposed to close the window however in this case the window doesn't close and if you try to close it manually afterwards (clicking the X in the corner) it still won't close.

Is this a bug?

Thanks,
Andy

[Dobromir]

Hi Andy,

The code that you provided looks OK and we suppose that the problem might be caused by something else. Could you please open a support ticket and attach a simple project reproducing the issue so we can investigate it further?

All the best,
Dobromir
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.