All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
The RadDock control can be dragged using Grips or TitleBar depending on the DockHandle property. You can also do change the handle on the client via the set_handle method:
<
telerik:RadDock
ID
=
"RadDock4"
runat
"server"
>
ContentTemplate
You can drag this object using the image below: <
img
id
"HandleImage4"
src
"../Skinning/Thumbnails/Blue.gif"
alt
"Image"
/>
</
function
OnClientInitialize(dock, args) {
var
dragHandle = document.getElementById(
);
dock.set_handle(dragHandle);
}
<%@ 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" /> <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" /> <div class="demo-container size-wide"> <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> <table style="width: 757px; height: 352px;"> <tr> <td style="padding-top: 20px; vertical-align: top;"> <telerik:RadDockZone runat="server" Style="background: url(images/bg.gif)" ID="RadDockZone1" Orientation="Vertical" MinHeight="300px" Width="200px"> <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" Title="RadDock1" runat="server" Width="200px" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px;"> You can drag this object through the titlebar, no custom handle is defined. </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" Title="RadDock2" runat="server" Width="200px" OnClientInitialize="SetHandleDock" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px; text-align: center;"> <img id="Handle_RadDock2" alt="Image" src="images/drag.gif" style="cursor: move;" /><br /> You can drag this object using the image above. </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> <td style="vertical-align: top; padding-top: 20px;"> <telerik:RadDockZone Style="background: url(images/bg.gif)" runat="server" ID="RadDockZone2" Orientation="Vertical" MinHeight="300px" Width="200px"> <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" Title="RadDock3" runat="server" Width="200px" DockHandle="None" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px;"> You cannot drag this object as the property dockhandle is set to None and acustom handle is not defined. </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" ID="RadDock4" Title="RadDock4" runat="server" Width="200px" DockHandle="None" OnClientInitialize="SetHandleDock" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px; text-align: center;"> <img id="Handle_RadDock4" alt="Image" src="images/drag.gif" style="cursor: move;" /><br /> You can drag this object using the image above. </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> <td style="padding-right: 36px; padding-top: 20px; vertical-align: top;"> <telerik:RadDockZone Style="background: url(images/bg.gif)" runat="server" ID="RadDockZone3" Orientation="Vertical" MinHeight="300px" Width="200px"> <telerik:RadDock RenderMode="Lightweight" ID="RadDock5" Title="RadDock5" runat="server" Width="200px" DockHandle="Grip" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px;"> You can drag this object through the grip, no custom handle is defined. </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" ID="RadDock6" Title="RadDock6" runat="server" Width="200px" DockHandle="Grip" OnClientInitialize="SetHandleDock" CssClass="higherZIndex"> <ContentTemplate> <div style="padding: 11px; text-align: center;"> You can drag this object using the text below:<br /> <br /> <div id="Handle_RadDock6" style="text-align: center; cursor: move;"> <b>DRAG HERE</b> </div> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> </tr> </table> </telerik:RadDockLayout> </div> </form> </body> </html>