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

Dock Mode

RadDock1
  • Collapse
  • Close
DockMode is Default. This object can be docked and undocked
RadDock2
  • Collapse
  • Close
DockMode is Docked. This object cannot be floating

The RadDock controls can  be floating or docked. Their behavior can be changed using DockMode property.

  • DockMode ="Default"—the RadDock control can be docked or floating.
  • DockMode ="Docked"—the RadDock control cannot be floating.The RadDock control will always be docked in a RadDockZone.
  • DockMode ="Floating"—the RadDock control cannot be docked to a RadDockZone.The RadDock control will always be floating.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-narrow">
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <table>
                <tr>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="Vertical" MinHeight="300px"
                            Width="230px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" Title="RadDock1" runat="server" Width="230px" DockMode="Default"
                                Text="DockMode is Default. This object can be docked and undocked " CssClass="higherZIndex">
                            </telerik:RadDock>
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" Title="RadDock2" runat="server" Width="230px" DockMode="Docked"
                                Text="DockMode is Docked. This object cannot be floating " CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="Vertical" MinHeight="300px"
                            Width="230px">
                        </telerik:RadDockZone>
                    </td>
                    <td style="padding-left: 70px;">
                        <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" Title="RadDock3" runat="server" Width="230px" DockMode="Floating" CssClass="higherZIndex"
                            Top="200px" Left="600px" Text="DockMode is Floating. This object cannot be docked ">
                        </telerik:RadDock>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance