One Dock per DockZone

5 posts, 0 answers
  1. Avinash
    Avinash avatar
    22 posts
    Member since:
    Nov 2008

    Posted 16 Apr 2010 Link to this post

    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
  2. Avinash
    Avinash avatar
    22 posts
    Member since:
    Nov 2008

    Posted 19 Apr 2010 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 19 Apr 2010 Link to this post

    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.
  5. Martin Messick
    Martin Messick avatar
    1 posts
    Member since:
    Oct 2009

    Posted 19 Apr 2010 Link to this post

    This is a nice feature.  How would it change to make exactly the opposite behavior?   Dock to "currentIndex" doesn't seem to work.
  6. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Apr 2010 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017