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

forbiddenZoneCssClass

1 Answer 44 Views

Dock

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

1 Answer, 1 is accepted

answered on 15 Mar 2010, 02:41 PM

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

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

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