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

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.

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>
<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>

Support & Learning Resources

Find Assistance