New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Zone Highlighting

Arrange the RadDocks from the above RadDockZone in the below RadDockZones.
If you hover the correct RadDockZone, it will be highlighted.
Image
Image
Image

While dragging a RadDock, if a RadDockZone is hovered over, the RadDockZone gets highlighted. With RadDock it is possible to specify the highlighting style for each docking zone using the HighlightedCssClass property.

  • If the HighlightedCssClass is set, for example: RadDockZone.HighlightedCssClass="CustomCssClass", the css class HighlightedStyle will be applied to the RadDockZone when the zone is highlighted.
  • If the HighlightedCssClass is not set, the RadDockZone will not be highlighted while dragging a RadDock over it.
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox Type="Info" runat="server" Icon="Info">
                Arrange the RadDocks from the above RadDockZone in the below RadDockZones.<br />
                If you hover the correct RadDockZone, it will be highlighted.
    </qsf:MessageBox>
    <div class="demo-container size-custom">
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Horizontal" Height="221px"
                Width="560px">
                <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneLeft,RadDockZoneRight"
                    OnClientInitialize="SetHandleDock" DockHandle="None">
                    <ContentTemplate>
                        <img id="Handle_RadDock1" alt="Image" src="images/pic2.jpg" />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneCenter,RadDockZoneRight"
                    OnClientInitialize="SetHandleDock" DockHandle="None">
                    <ContentTemplate>
                        <img id="Handle_RadDock2" alt="Image" src="images/pic1.jpg" />
                    </ContentTemplate>
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" runat="server" Width="183px" DockMode="Docked" ForbiddenZones="RadDockZoneLeft,RadDockZoneCenter"
                    OnClientInitialize="SetHandleDock" DockHandle="None">
                    <ContentTemplate>
                        <img id="Handle_RadDock3" alt="Image" src="images/pic3.jpg" />
                    </ContentTemplate>
                </telerik:RadDock>
            </telerik:RadDockZone>
            <br />
            <table>
                <tr>
                    <td>
                        <telerik:RadDockZone ID="RadDockZoneLeft" runat="server" Height="224px" Width="183px"
                            Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-right: 0px; float: left; overflow: hidden">
                        </telerik:RadDockZone>
                        <telerik:RadDockZone ID="RadDockZoneCenter" runat="server" Height="224px" Width="183px"
                            Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-left: 0px; padding-right: 0px; float: left; overflow: hidden">
                        </telerik:RadDockZone>
                        <telerik:RadDockZone ID="RadDockZoneRight" runat="server" Height="224px" Width="183px"
                            Skin="Default" HighlightedCssClass="CustomCssClass" Style="padding-left: 0px; float: left; overflow: hidden">
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance