Dock - Dock Resizing

RadDock1
  • Collapse
  • Close
RadDock is placed in a vertically oriented RadDockZone. Grab the bottom handle to resize the dock vertically. Horizontal resizing is not allowed.
RadDock3
  • Collapse
  • Close
RadDock is placed in a horizontally oriented RadDockZone. Grab the right handle to resize the dock horizontally. Vertical resizing is not allowed.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadDock provides the Resizable property which makes the dock resizable when its value is set to true. By default its value is false. The RadDock control cannot be resized when it is collapsed.

When RadDock is placed in a vertically oriented RadDockZone (Orientation="Vertical"), grab the bottom handle to resize the dock vertically. Horizontal resizing is not allowed.

RadDock's client-side API provides the following events related to resizing:

  • OnClientResizeStart—fires when RadDock's resizing has started
  • OnClientResizeEnd—fires when RadDock's resizing has finished
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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-thin">
        <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
            <table cellpadding="0">
                <tr>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="200" Width="300">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" Title="RadDock1" Width="200" Resizable="true"
                                Text="RadDock is placed in a <strong>vertically</strong> oriented RadDockZone. Grab the bottom handle to resize the dock vertically. Horizontal resizing is not allowed." CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
                <tr>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200" Width="300" Orientation="Horizontal">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock3" runat="server" Title="RadDock3" Height="195" Width="220" Resizable="true"
                                Text="RadDock is placed in a <strong>horizontally</strong> oriented RadDockZone. Grab the right handle to resize the dock horizontally. Vertical resizing is not allowed." CssClass="higherZIndex">
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
            <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" Title="RadDock2" Top="230px" Left="600px" CssClass="higherZIndex"
                Width="300px" Resizable="true" Text="Grab the right, the bottom or the left handle to resize the dock, when it is not placed in a docking zone.">
            </telerik:RadDock>
        </telerik:RadDockLayout>
        <div style="padding: 10px 0;">
            <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="server" Text="Do postback"></telerik:RadButton>
        </div>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?