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

Zone Orientation

Horizontal Dock Zone with fixed Height

RadDock1
  • Collapse
  • Close
RadDock1
RadDock2
  • Collapse
  • Close
RadDock2
RadDock3
  • Collapse
  • Close
RadDock3
RadDock4
  • Collapse
  • Close
RadDock4

Horizontal Dock Zone with MinHeight

RadDock5
  • Collapse
  • Close
RadDock5
RadDock6
  • Collapse
  • Close
RadDock6
RadDock7
  • Collapse
  • Close
RadDock7
RadDock8
  • Collapse
  • Close
RadDock8

Vertical Dock Zone with fixed Height

RadDock9
  • Collapse
  • Close
RadDock9
RadDock10
  • Collapse
  • Close
RadDock10
RadDock11
  • Collapse
  • Close
RadDock11
RadDock12
  • Collapse
  • Close
RadDock12

Vertical Dock Zone with MinHeight

RadDock13
  • Collapse
  • Close
RadDock13
RadDock14
  • Collapse
  • Close
RadDock14
RadDock15
  • Collapse
  • Close
RadDock15
RadDock16
  • Collapse
  • Close
RadDock16

RadDockZones can be Horizontal and Vertical. You can set their orientation using the Orientation property. By default, the property value is set to Vertical.

  1. RadDockZone is vertical
    • Height property is set: RadDocks will be ordered vertically. Scrollbars will appear in the RadDockZone if RadDockZone cannot fit the RadDocks.
    • Height property is not set: RadDocks will be ordered vertically.RadDockZone will resize vertically to fit RadDocks
  2. RadDockZone is horizontal
    • Height property is set: RadDocks will be ordered horizontally until they reach RadDockZone width, after that they will be ordered horizontally on next row. Scrollbars will appear in RadDockZone if RadDockZone can not fit the RadDocks.
    • Height property is not set: RadDocks will be ordered horizontally until they reach RadDockZone width, after that they will be ordered horizontally on next row.RadDockZone will resize vertically to fit RadDocks.
  • DefaultCS.aspx
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true"  %>

<!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">
            <h2>Horizontal Dock Zone with fixed Height</h2>
            <telerik:RadDockZone runat="server" ID="RadDockZoneHorizontal1" Orientation="Horizontal"
                Height="150px" Width="650px">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock1" Title="RadDock1" Text="RadDock1" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock2" Title="RadDock2" Text="RadDock2" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock3" Title="RadDock3" Text="RadDock3" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock4" Title="RadDock4" Text="RadDock4" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
            <h2>Horizontal Dock Zone with MinHeight</h2>
            <telerik:RadDockZone runat="server" ID="RadDockZoneHorizontal2" Orientation="Horizontal"
                MinHeight="50px" Width="650px">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock5" Title="RadDock5" Text="RadDock5" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock6" Title="RadDock6" Text="RadDock6" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock7" Title="RadDock7" Text="RadDock7" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock8" Title="RadDock8" Text="RadDock8" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
            <h2>Vertical Dock Zone with fixed Height</h2>
            <telerik:RadDockZone runat="server" ID="RadDockZoneVertical1" Orientation="Vertical"
                Height="150px" Width="320px">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock9" Title="RadDock9" Text="RadDock9" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock10" Title="RadDock10" Text="RadDock10" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock11" Title="RadDock11" Text="RadDock11" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock12" Title="RadDock12" Text="RadDock12" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
            <h2>Vertical Dock Zone with MinHeight</h2>
            <telerik:RadDockZone runat="server" ID="RadDockZoneVertical2" Orientation="Vertical"
                MinHeight="150px" Width="320px">
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock13" Title="RadDock13" Text="RadDock13" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock14" Title="RadDock14" Text="RadDock14" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock15" Title="RadDock15" Text="RadDock15" CssClass="higherZIndex">
                </telerik:RadDock>
                <telerik:RadDock RenderMode="Lightweight" runat="server" ID="RadDock16" Title="RadDock16" Text="RadDock16" CssClass="higherZIndex">
                </telerik:RadDock>
            </telerik:RadDockZone>
        </telerik:RadDockLayout>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance