Hello Helena,
You can use the client-side API of the dock and the docking zone to achieve the desired functionality.
- The DockZone.dock(objDock, index) places the dock at the specified index in the zone.
- Telerik.Web.UI.RadDockZonesGlobalArray gets an array of all docking zones available on the page.
- DockZone.get_docks() returns an array of all docks placed within a zone.
Detailed information about the client-side API can be found on our online documentation:
http://www.telerik.com/help/aspnet-ajax/dock_client-side_basics.html
For your convenience I have created a sample project that moves the first dock from any zone to its left neighboring zone. Here is the source code:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<
head
id
=
"Head1"
runat
=
"server"
>
<
title
></
title
>
<
script
type
=
"text/javascript"
>
function OnClientCommand(dock, args)
{
var zonesArray = Telerik.Web.UI.RadDockZonesGlobalArray;
var length = zonesArray.length;
for (var i = 0; i <
length
; i++)
{
if (i + 1 != length)
{
var
docksArray
=
zonesArray
[i + 1].get_docks();
var
firstDock
=
docksArray
.length > 0 ? docksArray[0] : null;
if (firstDock)
{
zonesArray[i].dock(firstDock, 0);
}
}
}
}
</
script
>
<
style
type
=
"text/css"
>
.RadDockZone
{
float: left;
}
</
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"
>
<
Commands
>
<
telerik:DockCloseCommand
OnClientCommand
=
"OnClientCommand"
/>
</
Commands
>
<
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
=
"Hay"
>
<
Commands
>
<
telerik:DockCloseCommand
OnClientCommand
=
"OnClientCommand"
/>
</
Commands
>
<
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"
Skin
=
"Black"
>
<
Commands
>
<
telerik:DockCloseCommand
OnClientCommand
=
"OnClientCommand"
/>
</
Commands
>
<
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:RadDock
ID
=
"RadDock4"
runat
=
"server"
Width
=
"300px"
Title
=
"RadDock-Title"
Skin
=
"Simple"
>
<
Commands
>
<
telerik:DockCloseCommand
OnClientCommand
=
"OnClientCommand"
/>
</
Commands
>
<
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
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.