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.