<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="scripts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<qsf:MessageBox Type="Info" runat="server" Icon="Info">
Arrange the RadDocks from the above RadDockZone in the below RadDockZones.<br />
If you hover the correct RadDockZone, it will be highlighted.
</qsf:MessageBox>
<div class="demo-container size-custom">
<telerik:RadDockLayout runat="server" ID="RadDockLayout1">
<telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Horizontal" Height="221px"
Width="560px">
<telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneLeft,RadDockZoneRight"
OnClientInitialize="SetHandleDock" DockHandle="None">
<ContentTemplate>
<img id="Handle_RadDock1" alt="Image" src="images/pic2.jpg" />
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneCenter,RadDockZoneRight"
OnClientInitialize="SetHandleDock" DockHandle="None">
<ContentTemplate>
<img id="Handle_RadDock2" alt="Image" src="images/pic1.jpg" />
</ContentTemplate>
</telerik:RadDock>
<telerik:RadDock RenderMode="Lightweight" ID="RadDock3" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneLeft,RadDockZoneCenter"
OnClientInitialize="SetHandleDock" DockHandle="None">
<ContentTemplate>
<img id="Handle_RadDock3" alt="Image" src="images/pic3.jpg" />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
<br />
<table>
<tr>
<td>
<telerik:RadDockZone ID="RadDockZoneLeft" runat="server" Height="224px" Width="183px"
Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-right: 0px; float: left; overflow: hidden">
</telerik:RadDockZone>
<telerik:RadDockZone ID="RadDockZoneCenter" runat="server" Height="224px" Width="183px"
Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-left: 0px; padding-right: 0px; float: left; overflow: hidden">
</telerik:RadDockZone>
<telerik:RadDockZone ID="RadDockZoneRight" runat="server" Height="224px" Width="183px"
Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-left: 0px; float: left; overflow: hidden">
</telerik:RadDockZone>
</td>
</tr>
</table>
</telerik:RadDockLayout>
</div>
</form>
</body>
</html>