Center RadWindow on browser window resize

10 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 31 May 2011 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 01 Jun 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 01 Jun 2011 Link to this post

    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
  5. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 03 Jun 2011 Link to this post

    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.

  6. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 06 Jun 2011 Link to this post

    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
  7. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3600 posts

    Posted 08 Jun 2011 Link to this post

    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.

  8. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Jun 2011 Link to this post

    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. 
  9. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Jun 2011 Link to this post

    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. :)
  10. Tom
    Tom avatar
    8 posts
    Member since:
    Nov 2011

    Posted 19 Apr 2014 in reply to Sean Link to this post

    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








  11. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 23 Apr 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017