1 Answer, 1 is accepted
0
Hello Luke,
This scenario is not supported by the RadDock control out-of-the-box, but with a little CSS and JavaScript it can be achieved. The restriction zone should be represented by a <div/> with position:relative and overflow:auto. Because the RadDock is child to <form> element, the drag client-side event should be handled and the dock element appended to the restriction <div/>.
Here is an example that shows the above explained:
Regards,
Pero
the Telerik team
This scenario is not supported by the RadDock control out-of-the-box, but with a little CSS and JavaScript it can be achieved. The restriction zone should be represented by a <div/> with position:relative and overflow:auto. Because the RadDock is child to <form> element, the drag client-side event should be handled and the dock element appended to the restriction <div/>.
Here is an example that shows the above explained:
<!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> <style type="text/css"> .RadDock { position: relative !important; } .RadDockZone .RadDock { position: static; } .RadDockZone { position: absolute !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> function OnClientDrag(dock, sender) { $get('divRestrictionZone').appendChild(dock.get_element()); } </script> <div id="divRestrictionZone" style="position: relative; width: 600px; height: 600px; border: 1px solid red; overflow: auto;"> <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" OnClientDrag="OnClientDrag" Height="300px"> <ContentTemplate> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu leo quis felis eleifend congue id ac nulla. Suspendisse in sapien eu tortor aliquam luctus. Suspendisse pretium, nulla sit amet porttitor lobortis, ante sapien blandit ante, et tempor magna eros nec sapien. In hac habitasse platea dictumst. Nullam a quam lorem, eu vestibulum turpis. Praesent a neque et diam tincidunt suscipit ut semper massa. Vivamus posuere, mi eu consectetur consequat, libero risus accumsan erat, ut facilisis dolor justo a enim. Donec suscipit tincidunt lorem, sed aliquam velit pulvinar euismod. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </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.