This is a migrated thread and some comments may be shown as answers.

Center RadWindow on browser window resize

10 Answers 895 Views

Window

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 03 Jun 2011, 11:09 AM

Hi Sean,

Your code seems to be logically correct but here are some assumptions I prepared for you which might be the issue in your case:

1) Make sure that you handle the resize of the main page window object - if your code is inside a RadWindow's content page (I assume that this is possible because of the GetRadWindow function), attach it to the main page by using e.g BrowserWindow property or simply move the code to the main page and use $find to reference the RadWindow client object.

2) In case you use this code on the main page, make sure that it is not called too early in the page client lifecycle. To ensure that the RadWindow object is created, you should attach the handler at pageLoad at earliest.

At last, I prepared for you a small example based on your code:

<%@ Page Language="C#" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="RadScriptManager1" runat="server">

</asp:ScriptManager>

<script type="text/javascript">

var $ = $telerik.$;

function pageLoad() {

$(window).resize(function () {

var oWindow = GetRadWindow();

if (oWindow.isVisible()) {

oWindow.center();

}

});

}

function GetRadWindow() {

return $find("<%=win.ClientID %>");

}

</script>

<telerik:RadWindow ID="win" runat="server" VisibleOnPageLoad="true">

</telerik:RadWindow>

</form>

</body>

</html>

I hope that my reply is helpful, let me know how it goes.

Regards,
Svetlina
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 19 Apr 2014, 07:50 PM

Hi there,

I know this post is a bit old, but I'm having a problem with centering a radwindow inside another radwindow. I've tried using .center() on the clientside and an number of other methods but nothing seems to work as of now.

Ideally what I'm trying to accomplish is having the inner (second) radwindow (it goes browser window -> first radwindow -> second radwindow) be centered to the current scroll position of the first radwindow, rather than centered to the entire height of the first radwindow. For example, if the total height of the first radwindow was 1000 and the user scrolled halfway down (so the top of their screen starts at 500), I'd want the inner radwindow to be centered in the lower 500 region rather than centered to the total 1000.

Here's how my radwindow looks on the serverside

RadWindow PopUpForm = new RadWindow
            {
                ID = "PopUpForm",
                Title = "title",
                ShowContentDuringLoad = false,
                Top = 200,
                Left = 275,
                Width = 450,
                Height = 200,
                AutoSize = true,
                Modal = true,
                CenterIfModal = false,
                OnClientClose = "OnWindowClose",
                KeepInScreenBounds = true,
                Behaviors = WindowBehaviors.Maximize | WindowBehaviors.Move | WindowBehaviors.Resize | WindowBehaviors.Reload
            };

and I need to call it on the server side, so I'm doing this:

string script =
"
function MainPhone(
{
window.radopen('EditDuplicatePopUpForm.aspx"', 'PopUpForm');
Sys.Application.remove_load(MainPhone);
};
Sys.Application.add_load(MainPhone);
";

RadScriptManager.RegisterStartupScript(Page, Page.GetType(), "mykey", script, true);

any suggestions?

Thank you,

Tom

answered on 23 Apr 2014, 02:37 PM

RadWindow-centerInnerWindow.zip

Hello Tom,

You can handle the OnClientResizeEnd event of the first window, where you can find the second window and call its center() method. For example:
MainPage.aspx:

<script>

function OnClientClicked(sender, args) {

GetRadWindow().show();

}

function OnClientResizeEnd(sender, args) {

GetRadWindow().get_contentFrame().contentWindow.centerWindow();

}

function GetRadWindow() {

var oWnd = $find("<%=RadWindow1.ClientID%>");

return oWnd;

}

</script>

<telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="ContentPage.aspx" Width="500px" Height="500px" OnClientResizeEnd="OnClientResizeEnd"></telerik:RadWindow>

<telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Open First Window" OnClientClicked="OnClientClicked" />

ContentPage.aspx:

<script>

function OnClientClicked(sender, args) {

GetRadWindow().show();

}

function GetRadWindow() {

var oWnd = $find("<%=RadWindow2.ClientID%>");

return oWnd;

}

function centerWindow() {

GetRadWindow().center();

}

</script>

<telerik:RadWindow ID="RadWindow2" runat="server">

</telerik:RadWindow>

<telerik:RadButton ID="RadButton2" runat="server" AutoPostBack="false" Text="Open Second Window" OnClientClicked="OnClientClicked" />

You can find the full runnable VS example in the attached archive.

Regards,
Danail Vasilev
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.