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

One Dock per DockZone

4 Answers 61 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Avinash
Top achievements
Rank 2
Avinash asked on 16 Apr 2010, 10:29 AM
Hi,

I am having one request for my project asking for one Dock per DockZone.
The user can drag and drop the Docks over the DockZones but if I drop a Dock on DockZone in which already one Dock existts then the dropped Dock should be moved back to its original DockZone.

Early help appreciated.
Thanks,
Avi

4 Answers, 1 is accepted

Sort by
0
Avinash
Top achievements
Rank 2
answered on 19 Apr 2010, 07:39 AM
Hi,

I need this urgently...

My req. is I want one dock for one dockzone. The trick is I will be able to drag and drop Docks over dockzones.
I am having a page with 15 dockzones and 8 docks on it.
I can move these docs from different dockzones.
But my req. is I can be able to move docks on vacant dockzones not on the dockzone having a dock assigned to it. If I drag dock and drop it on dockzone where already one Dock exists then the moved dock should be aligned to its previous dockzone.

Urgent help appreciated,
thanks,
Avi
0
Pero
Telerik team
answered on 19 Apr 2010, 01:14 PM
Hi Avi,

This can be easily achieved using RadDock's client-side API. You need to handle the OnClientDragStart and OnClientDockPositionChanged client-side events, to get information about the original docking zone and to check whether the current zone has a docks placed inside. If this is the case the dock is returned to its original zones. Here is the full 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();
 
                if ((currentZone.get_id() != originalZoneID) && (currentZone.get_docks().length > 1))
                {
                    $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:RadDockZone ID="RadDockZone4" runat="server" MinHeight="300px" Width="300px">
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>


Sincerely yours,
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
Martin Messick
Top achievements
Rank 1
answered on 19 Apr 2010, 04:47 PM
This is a nice feature.  How would it change to make exactly the opposite behavior?   Dock to "currentIndex" doesn't seem to work.
0
Pero
Telerik team
answered on 22 Apr 2010, 08:26 AM
Hello David,

Could you please explain what do you mean by exactly the opposite behavior? Do you mean the docks should swap their positions and zones? If this is the case, you need to slightly modify the OnClientDockPositionChanged method in the following way:

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 > 1)
        {
            $find(originalZoneID).dock(dock, originalIndex);
        }
    }
}



Greetings,
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.
Tags
Dock
Asked by
Avinash
Top achievements
Rank 2
Answers by
Avinash
Top achievements
Rank 2
Pero
Telerik team
Martin Messick
Top achievements
Rank 1
Share this question
or