Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Set a maximum number of docks

6 Answers 98 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Ashley
Top achievements
Rank 1
Ashley asked on 26 Jul 2010, 11:47 AM
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

6 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 28 Jul 2010, 05:05 PM
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
0
Ashley
Top achievements
Rank 1
answered on 29 Jul 2010, 09:49 AM
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  
0
Ashley
Top achievements
Rank 1
answered on 29 Jul 2010, 10:57 AM
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
0
Accepted
Pero
Telerik team
answered on 02 Aug 2010, 09:02 AM
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
0
Ashley
Top achievements
Rank 1
answered on 02 Aug 2010, 10:53 AM
Hi Pedro,

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

regards,

Ash
0
Justin
Top achievements
Rank 1
answered on 06 Feb 2014, 05:12 PM
The first example worked very well right out of the gate. Made me look like a genius. Thanks for your help.
Tags
Dock
Asked by
Ashley
Top achievements
Rank 1
Answers by
Pero
Telerik team
Ashley
Top achievements
Rank 1
Justin
Top achievements
Rank 1
Share this question
or