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

Dock Handle

DockHandle is set to None. This mode is suitable for scenarios when you want to disable the drag and drop.
 
DockHandle is set to Grip. This mode is suitable for scenarios when you do not need the DockCommand items and you want to maximize the content size.
RadDock3
  • Collapse
  • Close
DockHandle is set to TitleBar. In this mode the TitleBar is visible and you have access to the DockCommand items.

The RadDock controls can be dragged using Grips or TitleBar. You can customize them using the DockHandle property of RadDock:

  • DockHandle ="Grip"—the DockHandle will always be grip. RadDock can be dragged using RadDock's grip.
  • DockHandle ="None"—the RadDock cannot be dragged.
  • DockHandle ="TitleBar"—the RadDock can be dragged using RadDock's titlebar.
  • 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-wide">
        <telerik:RadDockLayout runat="server" ID="RadDockLayout1">
            <table style="width: 100%">
                <tr>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="Vertical" MinHeight="200px"
                            Width="200px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" Title="RadDock1" runat="server" Width="200px" DockHandle="None"
                                Text="DockHandle is set to None. This mode is suitable for scenarios when you want to disable the drag and drop." CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="Vertical" MinHeight="200px"
                            Width="200px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" Title="RadDock2" runat="server" Width="200px" DockHandle="Grip"
                                Text="DockHandle is set to Grip. This mode is suitable for scenarios when you do not need the DockCommand items and you want to maximize the content size." CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td>
                        <telerik:RadDockZone runat="server" ID="RadDockZone3" Orientation="Vertical" MinHeight="200px"
                            Width="200px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" Title="RadDock3" runat="server" Width="200px" DockHandle="TitleBar"
                                Text="DockHandle is set to TitleBar. In this mode the TitleBar is visible and you have access to the DockCommand items." CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance