This is a migrated thread and some comments may be shown as answers.

how to swap docks between two zones

5 Answers 126 Views

Dock

This is a migrated thread and some comments may be shown as answers.

5 Answers, 1 is accepted

answered on 14 Dec 2009, 08:41 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title 2"

OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title 3"

OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock7" runat="server" Width="300px" Title="RadDock-Title 4"

OnClientDragStart="OnDragStart" OnClientDragEnd="OnDragEnd">

<ContentTemplate>

<br />

CONTENT

<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 />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-2" OnClientDragStart="OnDragStart"

OnClientDragEnd="OnDragEnd">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-3" OnClientDragStart="OnDragStart"

OnClientDragEnd="OnDragEnd">

<ContentTemplate>

<br />

CONTENT

<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.

answered on 24 Dec 2009, 05:15 PM

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<string, string>>(positionsAndIndices[0]);         
                                e.Indices = serializer.Deserialize<Dictionary<string, int>>(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);         
                                 
                     
                    }         

answered on 25 Dec 2009, 09:08 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock5" runat="server" Width="300px" Title="RadDock-Title 2"

OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"

AutoPostBack="true">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock6" runat="server" Width="300px" Title="RadDock-Title 3"

OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"

AutoPostBack="true">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock7" runat="server" Width="300px" Title="RadDock-Title 4"

OnClientDragStart="OnDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged"

AutoPostBack="true">

<ContentTemplate>

<br />

CONTENT

<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 />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock3" runat="server" Width="300px" Title="RadDock-2" OnClientDragStart="OnDragStart"

OnClientDockPositionChanged="OnClientDockPositionChanged" AutoPostBack="true">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

<telerik:RadDock ID="RadDock4" runat="server" Width="300px" Title="RadDock-3" OnClientDragStart="OnDragStart"

OnClientDockPositionChanged="OnClientDockPositionChanged" AutoPostBack="true">

<ContentTemplate>

<br />

CONTENT

<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.

answered on 26 Jun 2013, 10:14 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

how to swap docks between two zones

5 Answers, 1 is accepted