Modal RadWindow position - always in the center

[Sphengle]

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

[Georgi Tunev]

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.

[Sphengle]

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.

[Georgi Tunev]

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.

[Sphengle]

Hi Georgi

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

Regards

[Jan Mracek]

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

Jaroslav

[Georgi Tunev]

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.

[J2K]

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.

[Georgi Tunev]

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

[J2K]

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.

[mkavici]

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");
    }
});

[Marin Bratanov]

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

[Kiran]

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.

 

 

[Marin Bratanov]

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

[Kiran]

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.