Hello Nicholas Walker,
You can add a new CSS class to all forbidden zones when RadDock starts to move. To achieve this you should handle RadDock's OnClientDragStart event and add a new CSS class to the forbidden zones. Here is a simple example:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.ForbiddenCss
{
background-color:Red !important;
}
</style>
<script type="text/javascript">
function DockDragStart(dock) {
var forbiddenZones = dock.get_forbiddenZones();
for (var zoneId in forbiddenZones) {
var zone = $find(forbiddenZones[zoneId]);
if(zone != null) {
var zoneElement = zone.get_element();
Sys.UI.DomElement.addCssClass(zoneElement, "ForbiddenCss");
}
}
}
function DockDragEnd(dock) {
var forbiddenZones = dock.get_forbiddenZones();
for (var zoneId in forbiddenZones) {
var zone = $find(forbiddenZones[zoneId]);
if (zone != null) {
var zoneElement = zone.get_element();
Sys.UI.DomElement.removeCssClass(zoneElement, "ForbiddenCss");
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<telerik:RadDockLayout ID="RadDockLayout1" runat="server">
<table>
<tr>
<td>
<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600px" Width="250px">
<telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title"
ForbiddenZones="RadDockZone2,RadDockZone3"
OnClientDragStart="DockDragStart" OnClientDragEnd="DockDragEnd">
<ContentTemplate>
CONTENT
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</td>
<td>
forbiden:
<telerik:RadDockZone ID="RadDockZone2" runat="server" Height="600px" Width="250px">
</telerik:RadDockZone>
</td>
<td>
forbiden:
<telerik:RadDockZone ID="RadDockZone3" runat="server" Height="600px" Width="250px">
</telerik:RadDockZone>
</td>
<td>
<telerik:RadDockZone ID="RadDockZone4" runat="server" Height="600px" Width="250px">
</telerik:RadDockZone>
</td>
</tr>
</table>
</telerik:RadDockLayout>
</div>
</form>
</body>
</html>
Hope this helps.
Regards,
Petio Petkov
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.