<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
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.
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.
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.
I managed to solve the problem by removing the OpenerElementID from the Window definition. The moveTo() method now works as expected.
Regards
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.
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.
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
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");
}
});
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
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.
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
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.