Modal RadWindow position - always in the center

15 posts, 0 answers
  1. Sphengle
    Sphengle avatar
    29 posts
    Member since:
    Sep 2007

    Posted 21 Apr 2010 Link to this post

    Anyone know how to set the position of a RadWindow when it is modal.  Not matter what Left, Top or OpenerElementID property values you set it always appears in the centre.  In my app the centre happens to be a very bad place for it.


     <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Vista" > 
                    <windows> 
                        <telerik:RadWindow   
                            ID="RadWindow1"   
                            runat="server"   
                            ShowContentDuringLoad="False"   
                            Width="400px" 
                            Height="350px"   
                            Title="Action..." 
                            VisibleStatusbar="False"   
                            style="display:none;"   
                            Behavior="Close"   
                            InitialBehavior="None"                         
                            Modal="True"   
                            NavigateUrl=""                          
                            Behaviors="Close" 
                            Left="0" Top="0"   
                            OpenerElementID="fsMyActivities" 
                              
                             > 
                        </telerik:RadWindow> 
                    </windows> 
                </telerik:RadWindowManager> 

    The window is being opened using radopen() in JavaScript.


    Thanks

  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 21 Apr 2010 Link to this post

    Hello Sphengle,

    By design a modal RadWindow will always be shown in the page's center. If you want to move it somewhere else, you should use moveTo() after showing the popup. 

    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Sphengle
    Sphengle avatar
    29 posts
    Member since:
    Sep 2007

    Posted 21 Apr 2010 Link to this post

    Hi Georgi

    Sorry , still can't get it to budge.  I'm doing this....

    var oWnd = radopen(url, "RadWindow1");  
    oWnd.moveTo( 5, 5 ); 

    It opens OK as usual but doesn't move.

  4. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 21 Apr 2010 Link to this post

    Hi Sphengle,

    I tried your code and everything is working as expected on my side (see attached movie). Could you please open a support ticket and send me a small sample project where the problem could be reproduced? I will check it and get back to you right away.


    Greetings,
    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Sphengle
    Sphengle avatar
    29 posts
    Member since:
    Sep 2007

    Posted 21 Apr 2010 Link to this post

    Hi Georgi

    I managed to solve the problem by removing the OpenerElementID from the Window definition.  The moveTo() method now works as expected.

    Regards
  6. Jan Mracek
    Jan Mracek avatar
    1 posts
    Member since:
    Jun 2004

    Posted 13 May 2010 Link to this post

    I have similar problem, after update from dll from 2009 to 2010 client method set_offsetElementID doesn't work for modal window.

    Jaroslav
  7. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 13 May 2010 Link to this post

    Hi Jan,

    If the window is modal, it will always be displayed in the center of the page, no matter if there is an offset element set. Please use moveTo() to position the modal window in the desired location.


    Regards,
    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  8. J2K
    J2K avatar
    34 posts
    Member since:
    Sep 2005

    Posted 01 Aug 2010 Link to this post

    Using moveTo() works as explained in this thread, except when the RadWindow is animated.  When animated, and setting the window's modal property to true, the Window is centered and since I'm working on a fairly tall window, I do need it positioned carefully. Is there a work around for positioning a modal, animated window?

    Here's the Window's tag:

    <

    telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Windows7" DestroyOnClose="True" Modal="True" ReloadOnShow="True" Width=900 Height=600 VisibleStatusbar="False" Animation="Resize" Left="1px" Top="1px">

     

     

    </telerik:RadWindowManager>

     


    Here's the script for opening the window on selection of a row in a RadGrid:

     

    function OpenWindow(sender, args)

     

    {

     

    var cid= args.getDataKeyValue("ClientID");

     

     

    //alert( args.getDataKeyValue("ClientID"));

     

     

    var wd = window.radopen("Client.aspx?ClientID=" + cid , "DialogWindow");

     

    wd.set_height(650);

    wd.set_width(900);

    wd.moveTo(1,1);

     

     

    return false

     

    }

    Note that with animation, the script's set_height, set_width, and moveto lines are all ignored, as are the tag's left/top properties.

    We always need to use your modal feature as we are displaying a form for data entry.  Your animation property is a nice feature, and would like to use if possible.  Thanks.

  9. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 04 Aug 2010 Link to this post

    Hello J2K,

    I am afraid that for your code to work, you should not use animation. The animation feature of the window control include complex calculations and while in theory we can add a check if the window object is additionally moved on the page while shown (and act accordingly), such check will make the code even more complex and will severely degrade the performance.

    Kind regards,
    Georgi Tunev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  10. J2K
    J2K avatar
    34 posts
    Member since:
    Sep 2005

    Posted 05 Aug 2010 Link to this post

    Georgi ... thanks for the explanation, I appreciate it.  Your animation feature is very good, but we can certainly live without it for this particular purpose.
  11. mkavici
    mkavici avatar
    2 posts
    Member since:
    Nov 2007

    Posted 08 Feb 2014 Link to this post

    to keep RadWindow on center its css position must be fixed.
    Using Jquery you can change position absolute to fixed on window load.

    $(window).load(function () {
        if ($(".RadWindow").length > 0) {
            $(".RadWindow").css("position", "fixed").css("top", "250px");
        }
    });
  12. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4659 posts

    Posted 10 Feb 2014 Link to this post

    Hi guys,

    You can now set positions for a modal RadWindow: http://www.telerik.com/help/aspnet-ajax/window-troubleshooting-positioning-modal-popup.html.
    In case you do not want RadWindow to scroll with the rest of the page you can either override its CSS position to fixed, or use its Pin behavior:
    - manually click the pin icon
    - OR set it as an initial behavior to the control: http://www.telerik.com/help/aspnet-ajax/window-behavior-initial-window-state.html.
    - OR pin it with a few lines of code in the OnClientShow event:
    function OnClientShow(sender, args) {
        if (!sender.isPinned())
            sender.togglePin();
    }



    Regards,
    Marin Bratanov
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  13. Kiran
    Kiran  avatar
    40 posts
    Member since:
    Oct 2018

    Posted 26 Nov 2018 Link to this post

    I am trying to open radwindow in android tablet. the radwindow comes up exactly in the center of the screen. The problem is that while typing the virtual keyboard covers up the textboxes in the radwindow. Can someone please help me with this situation?

    I need your help to do one of two things presented below.

    1) Push the radwindow up in the screen to accommodate the virtual keyboard. Basically have both radwindow and keyboard occupy the screen without overlapping.

    2) Open the radwindow in the Center horizontally but to the top vertically. This way the keyboard can be accommodated comfortably without covering the radwindow.

    Here is my radwindow and other code that helps me set the radwindow in the center.

     

    <telerik:RadWindow  Skin="Silk" RenderMode="Lightweight" ID="UserListDialog" runat="server" Title="Editing record" Height="650"  Behaviors="Move"
                    Width="800" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" Left="0px"  Top="0px" OnClientShow ="setCustomPosition" OnClientClose="OnClientClose"  >
                </telerik:RadWindow>

     

    function setCustomPosition(sender, args) {
              sender.moveTo(sender.get_left(), sender.get_top());
              document.body.style.position = 'fixed';
              setTimeout(function () {
                  document.body.style.overflow = 'visible';
              }, 100)
          }

          function OnClientClose() {
               document.body.style.position = 'static';
          }

     

    Thank you.

     

     

  14. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4659 posts

    Posted 27 Nov 2018 Link to this post

    Hi Kiran,

    I would recommend that you take the approach from the following article on making the RadWindow react to mobile devices viewport change: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/mobile-support/responsive,-adaptive-and-elastic-capabilities#fluid-or-adaptive-design-with-radwindow

    There are the orientationChange and resize events the browser fires and there is no keyboard specific event. So, if you want to handle this in another way (a maximized RadWIndow uses window.resize), you could track the aspect ratio of the viewport and calculate dimensiosn anew in a fashion similar to this article (you'd have to add the aspect ratio monitoring to look for a keyboard): https://www.telerik.com/support/kb/aspnet-ajax/window/details/setting-size-in-percent-for-the-radwindow.

    You can also use the control's client API to change its position: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/troubleshooting/positioning-a-modal-radwindow#all-versions---using-client-side-events-and-api and if you need its current coordinates, its .getWindowBounds() method offers that: https://docs.telerik.com/devtools/aspnet-ajax/controls/window/client-side-programming/radwindow-object.


    Regards,
    Marin Bratanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  15. Kiran
    Kiran  avatar
    40 posts
    Member since:
    Oct 2018

    Posted 27 Nov 2018 Link to this post

    Thank you Marin for the information. 

    However, I tried my second approach to move the radwindow to the top (vertically) and center (horizontally) to the screen using radwindow.moveto(x, y) (radwindow.moveto("100", "0") in my case) in the javascript where I call my radwindow to open the page. This helped me solve the issue where the radwindow and on screen keyboard both are accommodated without overlapping in the portrait view.

Back to Top