Nicholas Walker
Top achievements
Rank 1
Rank 1
Nicholas Walker
asked on 11 Mar 2010, 07:40 PM
Using the highlightedCssClass property on a dock zone is great. However, I can't seem to find out how to set the css class when a dock is hovered over a forbidden zone, so I can highlight to indicate that the dock cannot go in that zone.
Any help?
Any help?
1 Answer, 1 is accepted
0
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:
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.
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"> <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.