This is a migrated thread and some comments may be shown as answers.
forbiddenZoneCssClass
1 Answer 11 Views
This is a migrated thread and some comments may be shown as answers.
Nicholas Walker
Top achievements
Rank 1
Nicholas Walker asked on 11 Mar 2010, 06:58 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?

1 Answer, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
answered on 15 Mar 2010, 02:41 PM
Hello Nicholas Walker,

You can add a new CSS class to all forbidden zones when a 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.

Sincerely yours,
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.
Tags
Dock
Asked by
Nicholas Walker
Top achievements
Rank 1
Answers by
Petio Petkov
Telerik team
Share this question
or