Hi, hopefully an easy one. I am using a modal window which is popped from a normal aspx page. Users can grab the title bar of the window and drag it above the browser pane and let go, then once they let go of the mouse button, they cannot move it back down or close it, so have to refresh the whole parent page.
Can I prevent it from being dragged out of bounds?
Can I prevent it from being dragged out of bounds?
5 Answers, 1 is accepted
0
Hi Temp,
There are 2 properties that would help you in this task - KeepInScreenBounds and RestrictionZoneID. The first will make sure that if RadWindow is shown on the page, it will always be in the viewport area and with the second property you can set a container element like DIV as a restriction zone - users will not be able to move the window outside of it.
Sincerely yours,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
There are 2 properties that would help you in this task - KeepInScreenBounds and RestrictionZoneID. The first will make sure that if RadWindow is shown on the page, it will always be in the viewport area and with the second property you can set a container element like DIV as a restriction zone - users will not be able to move the window outside of it.
Sincerely yours,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Temp
Top achievements
Rank 1
Rank 1
answered on 04 Aug 2008, 10:19 PM
Hi Georgi, Thanks alot for your help. KeepInScreenBounds sounds exactly what I want, but unfortunately it doesn't seem to do anything.
Can you please have a look at this code and tell me what is wrong with it? Using this as a test page, I can drag the popup up above the top of the browser viewing pane so the title bar is invisible, then the only way to get rid of the window is to refresh the parent.
Can you please have a look at this code and tell me what is wrong with it? Using this as a test page, I can drag the popup up above the top of the browser viewing pane so the title bar is invisible, then the only way to get rid of the window is to refresh the parent.
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> |
| <%@ 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"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| <script language="javascript" type="text/javascript"> |
| <!-- |
| function openWin() |
| { |
| var oWnd = radopen("Test.aspx", "RadWindow1"); |
| return false; |
| } |
| //--> |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div> |
| <input type="button" value="OpenTheWindow" onclick="openWin()"/> |
| <telerik:RadWindowManager VisibleStatusbar="false" Skin="WebBlue" Width="200" Height="300" DestroyOnClose="true" ID="RadWindowManager1" runat="server" Behaviors="Minimize, Move, Close, Pin, Reload" KeepInScreenBounds="True"> |
| </telerik:RadWindowManager> |
| </div> |
| </form> |
| </body> |
| </html> |
0
Hello Temp,
As noted in my previous reply, KeepInScreenBounds will make sure that when RadWindow is initially opened, it will be visible in the viewport area, however this property does not affect the movement of the window. If you want to prevent your users from moving the RadWindow outside of the page, I suggest to set a restriction zone with the RestrictionZoneID property - here is how it is implemented in our demos:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Window/Examples/RestrictionZone/DefaultCS.aspx
Regards,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
As noted in my previous reply, KeepInScreenBounds will make sure that when RadWindow is initially opened, it will be visible in the viewport area, however this property does not affect the movement of the window. If you want to prevent your users from moving the RadWindow outside of the page, I suggest to set a restriction zone with the RestrictionZoneID property - here is how it is implemented in our demos:
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Window/Examples/RestrictionZone/DefaultCS.aspx
Regards,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Temp
Top achievements
Rank 1
Rank 1
answered on 06 Aug 2008, 01:47 AM
Thanks Georgi, unfortunately I tried this and it doesn't seem to do anything.
I am using a master page with two content areas, I have tried setting the RestrictionZoneID to the main form, the ContentArea and even a div that is opened first thing inside the content area and closed at the end of it.
Does the parent have to have width or height attributes?
Can you please show me how I would just restrict the window to not go anywhere outside the viewing pane of the browser? Sorry if this is extremely simple and I have missed the obvious, but for me they can still drag the title bar of hte window above the viewing pane, meaning there is no way to get rid of it.
I am using a master page with two content areas, I have tried setting the RestrictionZoneID to the main form, the ContentArea and even a div that is opened first thing inside the content area and closed at the end of it.
Does the parent have to have width or height attributes?
Can you please show me how I would just restrict the window to not go anywhere outside the viewing pane of the browser? Sorry if this is extremely simple and I have missed the obvious, but for me they can still drag the title bar of hte window above the viewing pane, meaning there is no way to get rid of it.
0
Hi Temp,
Here is a small sample code that I hope would help to illustrate what I am talking about. As you can see, I've wrapped the whole content in a DIV and set its ID as a RestrictionZoneID for the RadWindow.
Now, setting this DIV as a restriction zone, would prevent the window to leave its area. This means that even if the users move the RadWindow outside of the viewing pane - we can't restrict this because when the mouse is moved outside of the browser or over the browser's toolbar and menus, the focus will be lost and RadWindow cannot "know" when or if the mouse is released (this is a general issue that is not related to the RadWindow control only).
Having a restriction zone however, will ensure that even the mouse is released and the window is displayed partially out of the viewport, your user will still be able to scroll the page and show the whole RadWindow again.
As for KeepInScreenBounds, if you run the code above as it is, you will notice that the RadWindow is shown in the center of the restriction zone - e.g. most probably outside of the viewport (depending on your browser's height). If you set however the KeepInScreenBounds property to true, the RadWindow position will be changed when it is shown so it is displayed in the viewing area. This property however affects only the initial showing of the window.
I hope this helps.
Greetings,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Here is a small sample code that I hope would help to illustrate what I am talking about. As you can see, I've wrapped the whole content in a DIV and set its ID as a RestrictionZoneID for the RadWindow.
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <div id="restrictionDiv" style="border: 1px solid red;"> |
| <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="about:blank" RestrictionZoneID="restrictionDiv" |
| VisibleOnPageLoad="true"> |
| </telerik:RadWindow> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| <br /> |
| </div> |
| </form> |
Now, setting this DIV as a restriction zone, would prevent the window to leave its area. This means that even if the users move the RadWindow outside of the viewing pane - we can't restrict this because when the mouse is moved outside of the browser or over the browser's toolbar and menus, the focus will be lost and RadWindow cannot "know" when or if the mouse is released (this is a general issue that is not related to the RadWindow control only).
Having a restriction zone however, will ensure that even the mouse is released and the window is displayed partially out of the viewport, your user will still be able to scroll the page and show the whole RadWindow again.
As for KeepInScreenBounds, if you run the code above as it is, you will notice that the RadWindow is shown in the center of the restriction zone - e.g. most probably outside of the viewport (depending on your browser's height). If you set however the KeepInScreenBounds property to true, the RadWindow position will be changed when it is shown so it is displayed in the viewing area. This property however affects only the initial showing of the window.
I hope this helps.
Greetings,
Georgi Tunev
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.