Floating Dock Inside Dock Layout only

2 posts, 0 answers
  1. Luke
    Luke avatar
    15 posts
    Member since:
    Nov 2009

    Posted 13 Jan 2011 Link to this post

    Hi I'm looking for a solution which denies the possibilty to float the Dock outside the Dock Layout. Is that possibile?

    Thanks in advance for your help.
    Luke
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 17 Jan 2011 Link to this post

    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:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top