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

Center RadWindow on browser window resize

10 Answers 671 Views
Window
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 2
Sean asked on 31 May 2011, 08:46 PM
Hi all,

I have a RadWindow which is popped up and centered. When the user decides to resize the browser window (e.g. changing it from maximized to partial-screen) the RadWindow does not re-center. I thought the easiest way to do this would be a bit of jQuery, but it doesn't seem to be firing?

$(window).resize(function () {
    var oWindow = GetRadWindow();
    if (oWindow.isVisible()) {
        oWindow.center();
    }
});

Is there anything wrong with this? I just have it floating inside of a RadCodeBlock/javascript block.

Thanks

Sean

10 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 01 Jun 2011, 09:18 AM
Hello Sean,

You can easily handle this by calling the Center() method from OnClientResizeEnd in a specified timeOut.

Javascript:
function OnClientResizeEnd(sender)
       window.setTimeout(
          function()
            {
       var wnd=sender;
       wnd.Center();
            }, 100);
      }

Hope it helps.

Thanks,
Shinu.
0
Sean
Top achievements
Rank 2
answered on 01 Jun 2011, 05:38 PM
Hi Shinu,

It is not the RadWindow that is being resized. It is the browser window. The RadWindow is modal and should always be displayed/visible, but when the browser window is resized it falls below and the user has to scroll the browser window down to see it / close it. I would expect something like the property KeepInScreenBounds to do this for me, but I guess not.

Sean
0
Svetlina Anati
Telerik team
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">
<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.

0
Sean
Top achievements
Rank 2
answered on 06 Jun 2011, 07:32 PM
Hi Telerik,

I am not trying to get the RadWindow centered on page load. I am already accomplishing that by calling oWindow.center(); after oWindow = window.radopen(..,..);

I am trying to get the RadWindow to recenter when the size of the browser window changes. pageLoad does not re-fire when the browser window resizes. I am unable to find a way to hook up to the browser window's resize event handler to re-center the rad window open on the browser window.

Sean
0
Marin Bratanov
Telerik team
answered on 08 Jun 2011, 02:13 PM

Hello Sean,

Have you tried the code Svetlina posted? On my end it seems to be working fine and does exactly what you want to achieve.

It uses the pageLoad() function to only attach the event handler to the browser window, so that it is sure that the AJAX enabled controls are already loaded on the page before trying to use them.



All the best,
Marin
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.

0
Sean
Top achievements
Rank 2
answered on 08 Jun 2011, 02:56 PM
My apologies. I read through the code once, but misinterpreted it. Looks like there's a reason client-side isn't my strong suit (yet!). I'll try this out in just a second when I get to work, but it looks like exactly what I was thinking. 
0
Sean
Top achievements
Rank 2
answered on 08 Jun 2011, 05:33 PM
Ahh, I found where the confusion was. I was putting this code on the pageLoad event handler for the RadWindow popping up as a dialog -- but it needed to be on the base page. Works fine now. Thanks. :)
0
Tom
Top achievements
Rank 1
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








0
Danail Vasilev
Telerik team
answered on 23 Apr 2014, 02:37 PM
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.

 
0
Kiran
Top achievements
Rank 1
answered on 13 Dec 2018, 08:58 PM

This solved my issue of trying to accomplish centering the radwindow based on the browser size or resize. 

Thank you.

Tags
Window
Asked by
Sean
Top achievements
Rank 2
Answers by
Shinu
Top achievements
Rank 2
Sean
Top achievements
Rank 2
Svetlina Anati
Telerik team
Marin Bratanov
Telerik team
Tom
Top achievements
Rank 1
Danail Vasilev
Telerik team
Kiran
Top achievements
Rank 1
Share this question
or