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

Set Drag Handle Client-side

RadDock1
  • Collapse
  • Close
You can drag this object through the titlebar, no custom handle is defined.
RadDock2
  • Collapse
  • Close
Image
You can drag this object using the image above.
You cannot drag this object as the property dockhandle is set to None and acustom handle is not defined.
Image
You can drag this object using the image above.
 
You can drag this object through the grip, no custom handle is defined.
 
You can drag this object using the text below:

DRAG HERE

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:

  • Set the content of the RadDock object:
    <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" />
        </ContentTemplate>
    </telerik:RadDock>
  • Handle the OnClientInitialize event of the RadDock—in the handler function get reference to your RadDock object and also the object within RadDock's template that you would like to set as a dock handle. Then, use set_handle method to set the RadDock's new handle element
    function OnClientInitialize(dock, args) {
        var dragHandle = document.getElementById("HandleImage4");
        dock.set_handle(dragHandle);
    }
  • DefaultVB.aspx
  • scripts.js
  • styles.css
<%@ Page Language="vb" 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>

Support & Learning Resources

Find Assistance