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

Modal RadWindow position - always in the center

14 Answers 680 Views
Window
This is a migrated thread and some comments may be shown as answers.
Sphengle
Top achievements
Rank 1
Sphengle asked on 21 Apr 2010, 12:03 PM
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

14 Answers, 1 is accepted

Sort by
0
Georgi Tunev
Telerik team
answered on 21 Apr 2010, 01:59 PM
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.
0
Sphengle
Top achievements
Rank 1
answered on 21 Apr 2010, 02:09 PM
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.

0
Georgi Tunev
Telerik team
answered on 21 Apr 2010, 03:02 PM
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.
0
Sphengle
Top achievements
Rank 1
answered on 21 Apr 2010, 05:34 PM
Hi Georgi

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

Regards
0
Jan Mracek
Top achievements
Rank 1
answered on 13 May 2010, 12:58 PM
I have similar problem, after update from dll from 2009 to 2010 client method set_offsetElementID doesn't work for modal window.

Jaroslav
0
Georgi Tunev
Telerik team
answered on 13 May 2010, 01:00 PM
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.
0
J2K
Top achievements
Rank 1
answered on 02 Aug 2010, 01:24 AM
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.

0
Georgi Tunev
Telerik team
answered on 04 Aug 2010, 02:46 PM
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
0
J2K
Top achievements
Rank 1
answered on 05 Aug 2010, 01:46 PM
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.
0
mkavici
Top achievements
Rank 2
answered on 08 Feb 2014, 09:12 AM
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");
    }
});
0
Marin Bratanov
Telerik team
answered on 10 Feb 2014, 01:27 PM
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.
0
Kiran
Top achievements
Rank 2
answered on 26 Nov 2018, 08:07 PM

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.

 

 

0
Marin Bratanov
Telerik team
answered on 27 Nov 2018, 01:10 PM
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.
0
Kiran
Top achievements
Rank 2
answered on 27 Nov 2018, 01:40 PM

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.

Tags
Window
Asked by
Sphengle
Top achievements
Rank 1
Answers by
Georgi Tunev
Telerik team
Sphengle
Top achievements
Rank 1
Jan Mracek
Top achievements
Rank 1
J2K
Top achievements
Rank 1
mkavici
Top achievements
Rank 2
Marin Bratanov
Telerik team
Kiran
Top achievements
Rank 2
Share this question
or