Constantine
Top achievements
Rank 1
Rank 1
Constantine
asked on 04 May 2011, 09:50 PM
I was just wondering if there was a way to limit floating RadDocks to within the screen bounds?
3 Answers, 1 is accepted
0
Hi Constantine,
With a bit of custom JS code this can be easily achieved. Here is what you need to do:
For your convenience I created a sample project that shows how this is implemented:
All the best,
Pero
the Telerik team
With a bit of custom JS code this can be easily achieved. Here is what you need to do:
- Handle the RadDock's initialize event (OnClientInitialize) property.
- Execute the following code in the handler:
dock._resizeExtender._autoScrollEnabled =false;
For your convenience I created a sample project that shows how this is implemented:
<!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></title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function OnClientInitialize(dock, args) { dock._resizeExtender._autoScrollEnabled = false; } </script> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" OnClientInitialize="OnClientInitialize" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>All the best,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Constantine
Top achievements
Rank 1
Rank 1
answered on 09 May 2011, 08:28 PM
Hi Pero,
I understand that will eliminate the ability for a user to autoscroll the dock off the screen. However, a user can still move the dock outside of the page boundaries and that will activate the scoll bars. Is there anyway to keep the entire dock in the screen boundaries or to eliminate the scroll bars?
Thanks,
Michael
I understand that will eliminate the ability for a user to autoscroll the dock off the screen. However, a user can still move the dock outside of the page boundaries and that will activate the scoll bars. Is there anyway to keep the entire dock in the screen boundaries or to eliminate the scroll bars?
Thanks,
Michael
0
Hi Michael,
I believe you are looking for the "Restriction Bounds" functionality that the RadWindow control has. The RadDock control does not provide such functionality and I would recommend using the Window control if possible.
In case this is not an option then you could try hiding the scrollbars on the browser with some JS:
Regards,
Pero
the Telerik team
I believe you are looking for the "Restriction Bounds" functionality that the RadWindow control has. The RadDock control does not provide such functionality and I would recommend using the Window control if possible.
In case this is not an option then you could try hiding the scrollbars on the browser with some JS:
<!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 id="Head1" runat="server"> <title></title> <style type="text/css"> .removeScroll { overflow: hidden; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function OnClientInitialize(dock, args) { dock._resizeExtender._autoScrollEnabled = false; } function OnClientDragStart(dock, args) { Sys.UI.DomElement.addCssClass(document.documentElement, "removeScroll"); } function OnClientDragEnd(dock, args) { Sys.UI.DomElement.removeCssClass(document.documentElement, "removeScroll"); } </script> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" OnClientInitialize="OnClientInitialize" OnClientDragStart="OnClientDragStart" OnClientDragEnd="OnClientDragEnd" Height="300px"> <ContentTemplate> Dock's Content </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.