forbiddenZoneCssClass

2 posts, 0 answers
  1. Nicholas Walker
    Nicholas Walker avatar
    30 posts
    Member since:
    Jul 2008

    Posted 11 Mar 2010 Link to this post

    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?
  2. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 15 Mar 2010 Link to this post

    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">
    <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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top