how to swap docks between two zones

6 posts, 0 answers
  1. Satyaprakash J
    Satyaprakash J avatar
    18 posts
    Member since:
    Sep 2009

    Posted 09 Dec 2009 Link to this post

    hi community,

    I have been looking for a solution to swap docks between two zones.

    The moment I drop dock from zone 2 to zone 1 i need dock from zone 1 should come to dock 2 . (Similar  to radgrid column swapping)


    Thanks Guys,
    SJ



  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Dec 2009 Link to this post

    Hi SJ,

    Your specific scenario can be implemented using RadDock's client-side API. The OnClientDragStart and OnClientDragEnd client-side events should be handled to get the DockZone and index where the dock will be docked. Here is the full source code of the project that I tested:

    <%@ 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>
     
        <script type="text/javascript">
            var initialZone;
            var initialIndex;
            function OnDragStart(dock, args)
            {
                initialIndex = dock.get_index();
                initialZone = dock.get_dockZone();
                //alert(dock.get_dockZoneID());
            }
     
            function OnDragEnd(dock, args)
            {
                var currentZone = dock.get_dockZone();
                var dockToBeDocked = currentZone.get_docks()[dock.get_index() + 1];
                if (dockToBeDocked != null && initialZone != null)
                {
                    initialZone.dock(dockToBeDocked, initialIndex);
                }
            }
        </script>
     
    </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"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title 1"
                        OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title 2"
                        OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title 3"
                        OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock7" runat="server" Width="300px" Title="RadDock-Title 4"
                        OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">
                        <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"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-1" OnClientDragStart="OnDragStart"
                        OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-2" OnClientDragStart="OnDragStart"
                        OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-3" OnClientDragStart="OnDragStart"
                        OnClientDragEnd="OnDragEnd">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>



    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. joshua waller
    joshua waller avatar
    1 posts
    Member since:
    Dec 2009

    Posted 24 Dec 2009 Link to this post

    pero,
    copying and pasting your demo works great. however, making a slight adjustment to the code is causing me issues. basically, all i have added is an OnSaveDockLayout event handler and the corresponding LoadDockLayout handler. i have also added an Update Panel. basically now the process seems to flow like Save Dock Layout -> OnDragEnd -> Load Dock Layout. this gives me the result of seeing the swap take place but then reloading the "pre-swap" state. how can i get around this as i need to persist the state of the docks when the client moves them. here are the updates to the above code that i made. thanks for the help! 

    josh

    updates to .aspx file
    <asp:UpdatePanel runat="server" ID="UpdatePanel1"
          <ContentTemplate> 
          <div> 
            <telerik:RadDockLayout OnSaveDockLayout="RadDockLayout1_SaveDockLayout" OnLoadDockLayout="RadDockLayout1_LoadDockLayout" ID="RadDockLayout1" runat="server"
    <!-- see above code --> 
            </telerik:RadDockLayout> 
        </div> 
        </ContentTemplate> 
    </asp:UpdatePanel> 

    updates to .cs (code behind) file

    protected void Page_Load(object sender, EventArgs e) 
            { 
                if (!Page.IsPostBack) 
                { 
     
                    //remove buttons from titlebar 
                    RadDock1.DefaultCommands = DefaultCommands.None; 
                    RadDock2.DefaultCommands = DefaultCommands.None; 
                    RadDock3.DefaultCommands = DefaultCommands.None; 
                    RadDock4.DefaultCommands = DefaultCommands.None; 
                    RadDock5.DefaultCommands = DefaultCommands.None; 
                    RadDock6.DefaultCommands = DefaultCommands.None; 
                    RadDock7.DefaultCommands = DefaultCommands.None; 
     
                    //save state triggers 
                    CreateSaveStateTrigger(RadDock1); 
                    CreateSaveStateTrigger(RadDock2); 
                    CreateSaveStateTrigger(RadDock3); 
                    CreateSaveStateTrigger(RadDock4); 
                    CreateSaveStateTrigger(RadDock5); 
                    CreateSaveStateTrigger(RadDock6); 
                    CreateSaveStateTrigger(RadDock7); 
                } 
            } 
     
            protected void RadDockLayout1_SaveDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e) 
            { 
                // Store the positions in a cookie. Note, that if there are lots of dock objects on the page 
                // the cookie length might become insufficient. In this case it would be better to use the 
                // cookie to store a key from a database, where the positions will be actually stored. 
                // 
                // You can store the positions directly in a database and use the ID of the currently logged  
                // user as a key to his personalized positions. 
                JavaScriptSerializer serializer = new JavaScriptSerializer(); 
                string serializedPositions = serializer.Serialize(e.Positions); 
                string serializedIndices = serializer.Serialize(e.Indices); 
     
                HttpCookie positionsCookie = new HttpCookie("DockLayout"
                    serializer.Serialize(new string[] { serializedPositions, serializedIndices })); 
     
                //Ensure that the cookie will not expire soon 
                positionsCookie.Expires = DateTime.Now.AddYears(1); 
                Response.Cookies.Add(positionsCookie); 
            } 
     
            protected void RadDockLayout1_LoadDockLayout(object sender, Telerik.Web.UI.DockLayoutEventArgs e) 
            { 
                HttpCookie positionsCookie = Request.Cookies["DockLayout"]; 
                if (!Object.Equals(positionsCookie, null)) 
                { 
                    string serializedPositionsAndIndices = positionsCookie.Value; 
                    if (!string.IsNullOrEmpty(serializedPositionsAndIndices)) 
                    { 
                        JavaScriptSerializer serializer = new JavaScriptSerializer(); 
                        string[] positionsAndIndices = serializer.Deserialize<string[]>(serializedPositionsAndIndices); 
     
                        e.Positions = serializer.Deserialize<Dictionary<stringstring>>(positionsAndIndices[0]); 
                        e.Indices = serializer.Deserialize<Dictionary<stringint>>(positionsAndIndices[1]); 
                    } 
                } 
            } 
     
            private void CreateSaveStateTrigger(RadDock dock) 
            { 
                //Ensure that the RadDock control will initiate postback 
                // when its position changes on the client or any of the commands is clicked. 
                //Using the trigger we will "ajaxify" that postback. 
                dock.AutoPostBack = true
                dock.CommandsAutoPostBack = true
     
                 
                AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger(); 
                saveStateTrigger.ControlID = dock.ID; 
                saveStateTrigger.EventName = "dockPositionChanged"
                UpdatePanel1.Triggers.Add(saveStateTrigger); 
     
                saveStateTrigger = new AsyncPostBackTrigger(); 
                saveStateTrigger.ControlID = dock.ID; 
                saveStateTrigger.EventName = "Command"
                UpdatePanel1.Triggers.Add(saveStateTrigger); 
                 
     
            } 


  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 25 Dec 2009 Link to this post

    Hello Josh,

    There is a problem when swapping the docks, because the OnClientDragEnd client-side event is fired after the page is posted back to the server by the respective Dock control. To overcome this problem simply replace the OnClientDragEnd event with the OnClientDockPositionChanged event. Here is the modified version of the previously sent project:

    <%@ 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>
     
        <script type="text/javascript">
            var initialZone;
            var initialIndex;
            function OnDragStart(dock, args)
            {
                initialIndex = dock.get_index();
                initialZone = dock.get_dockZone();
            }
     
            function OnClientDockPositionChanged(dock, args)
            {
                var currentZone = dock.get_dockZone();
                var dockToBeDocked = currentZone.get_docks()[dock.get_index() + 1];
                if (dockToBeDocked != null && initialZone != null && currentZone != initialZone)
                {
                    initialZone.dock(dockToBeDocked, initialIndex);
                }
            }
        </script>
     
    </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"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title 1"
                        OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"
                        AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title 2"
                        OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"
                        AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title 3"
                        OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"
                        AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock7" runat="server" Width="300px" Title="RadDock-Title 4"
                        OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"
                        AutoPostBack="true">
                        <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"
                    Style="float: left;">
                    <telerik:RadDock ID="RadDock2" runat="server" Width="300px" Title="RadDock-1" OnClientDragStart="OnDragStart"
                        OnClientDockPositionChanged="OnClientDockPositionChanged" AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-2" OnClientDragStart="OnDragStart"
                        OnClientDockPositionChanged="OnClientDockPositionChanged" AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                    <telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-3" OnClientDragStart="OnDragStart"
                        OnClientDockPositionChanged="OnClientDockPositionChanged" AutoPostBack="true">
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        </form>
    </body>
    </html>




    Kind regards,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Logan
    Logan avatar
    1 posts
    Member since:
    Jun 2013

    Posted 21 Jun 2013 Link to this post

    Hi, 

    I have a similar issue, except I am dynamically creating the dock zones on the back side. Is there anyway to do this? Thanks in advance.
  7. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 26 Jun 2013 Link to this post

    Hello Logan,

    Have you tried the solutions that were suggested previously in this forum thread?

    Since you are creating the RadDockZones dynamically, you need to ensure that this is done on the Init event of the page. Also, the dock zones should be recreated with the same ID they had before a postback is initiated, otherwise you will encounter problems with persisting the state of the controls and their content.

    Regards,
    Slav
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017