RadDock Screen Bounds

4 posts, 0 answers
  1. Constantine
    Constantine avatar
    6 posts
    Member since:
    Jan 2009

    Posted 04 May 2011 Link to this post

    I was just wondering if there was a way to limit floating RadDocks to within the screen bounds? 
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 09 May 2011 Link to this post

    Hi Constantine,

    With a bit of custom JS code this can be easily achieved. Here is what you need to do:
    1. Handle the RadDock's initialize event (OnClientInitialize) property.
    2. 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">
    <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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Constantine
    Constantine avatar
    6 posts
    Member since:
    Jan 2009

    Posted 09 May 2011 Link to this post

    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
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 11 May 2011 Link to this post

    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:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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.

Back to Top