Set a maximum number of docks

7 posts, 1 answers
  1. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 26 Jul 2010 Link to this post

    Hi I fairly new to using Telerik and I want to find a way of limiting the number of radDocks in a RadDockZone is there a general way of doing this and if so how.

    regards,

    Ash
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 28 Jul 2010 Link to this post

    Hi Ashley,

    The code pasted below limits the number of docks per zone to 2, and exchanges the places of the docks, if a dock is dropped over another. You can modify it so it returns the dock to its original place:

    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                var originalZoneID = "";
                var originalIndex = "";
                function OnClientDragStart(dock, args)
                {
                    originalZoneID = dock.get_dockZoneID();
                    originalIndex = dock.get_index();
                }
                function OnClientDockPositionChanged(dock, args)
                {
                    var currentZone = dock.get_dockZone();
                    var currentIndex = dock.get_index();
                    var docks = currentZone.get_docks();
     
                    if (currentZone.get_id() != originalZoneID)
                    {
                        if (docks[currentIndex + 1] != null)
                        {
                            $find(originalZoneID).dock(docks[currentIndex + 1], originalIndex);
                        }
                        else if (docks.length > 2)
                        {
                            $find(originalZoneID).dock(dock, originalIndex);
                        }
                    }
                }
     
            </script>
        </telerik:RadScriptBlock>
        <style type="text/css">
            .RadDockZone
            {
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Skin="Hay" DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"
                        Skin="Black" DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title"
                        DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    I hope this helps.


    All the best,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 29 Jul 2010 Link to this post

    Hi Pero,

    Its very close to what I want its just I want the dock I'm trying to drag to return.

    Thanks far the help so far,

    Ash  
  5. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 29 Jul 2010 Link to this post

    I have also noticed a slight glitch, I have 4 zones ideally 1 zone holds all the docks on initialization. the other three zones can only hold 3 as stated, however when I move them from dock 2 to 3 for example it only lets 2 in the dock, is there anything that can fix this? 

    regards,

    Ash
  6. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 02 Aug 2010 Link to this post

    Hello Ash,

    For your convenience I made some changes to the code from the previous thread to return the dock to its original zone, when it is not allowed to dock in the new zone. Here is the modified source code:
    <%@ 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">
    <head id="Head1" runat="server">
        <title></title>
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                var originalZoneID = "";
                var originalIndex = "";
                function OnClientDragStart(dock, args)
                {
                    originalZoneID = dock.get_dockZoneID();
                    originalIndex = dock.get_index();
                }
                function OnClientDockPositionChanged(dock, args)
                {
                    var currentZone = dock.get_dockZone();
                    var currentIndex = dock.get_index();
                    var docks = currentZone.get_docks();
     
                    if (currentZone.get_id() != originalZoneID)
                    {
                        if (docks.length > 2)
                        {
                            $find(originalZoneID).dock(dock, originalIndex);
                        }
                    }
                }
     
            </script>
        </telerik:RadScriptBlock>
        <style type="text/css">
            .RadDockZone
            {
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
                        Skin="Hay" DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-Title"
                        Skin="Black" DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
                <telerik:RadDockZone ID="RadDockZone3" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-Title"
                        DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>

    About the glitch, could you please provide more information, like a sample project or a video showing the problem? I don't fully understand the problem and am not sure what might be the reason for this behavior.

    All the best,
    Pero
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Ashley
    Ashley avatar
    22 posts
    Member since:
    Jul 2010

    Posted 02 Aug 2010 Link to this post

    Hi Pedro,

    That fixed it all thanks, your help is greatly appreciated.

    regards,

    Ash
  8. Justin
    Justin avatar
    20 posts
    Member since:
    Jul 2011

    Posted 06 Feb 2014 Link to this post

    The first example worked very well right out of the gate. Made me look like a genius. Thanks for your help.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017