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

One Dock per DockZone

4 Answers 68 Views

Dock

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

4 Answers, 1 is accepted

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

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

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

CONTENT

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

CONTENT

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

CONTENT

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

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