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

WebForms Dock Overview

  • Demo Configurator
  • Note: RadDock is resizable only when is floating

Choose DockHandle



  • Choose DockMode



  • Note: Floating/Docked mode will be enabled if all RadDocks are floating/docked

Choose RenderMode


This example demonstrates an implementation of a portal using RadDock. You can personalize the layout by reordering the different items in the three columns using drag-and-drop. The layout can be saved and later when the user comes back to this page the saved state is restored.

About RadDock for ASP.NET AJAX

With the help of the Telerik RadDock control for ASP.NET AJAX you can manage multiple windows and even the layout of your web page. It represents a moveable content placeholder which can be dragged around the Web page, docked into docking zones, collapsed into a minimized state, expanded to display their content, and pinned in place – all the familiar features found within Visual Studio .NET. The customized page layout can be saved to a file or database and reloaded for later use allowing for dynamic user-defined interfaces.

RadDock and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Highly Customizable Docking Object
  • Content Types RadDock supports different types of content– text, images, html, other controls
  • Various Types of Docking Zones
  • Animation Effects To enrich the UI with smooth objects movement, resizing, docking and undocking you can add animation effects
  • Client-side API and Events The Docking control provides a rich client-side API that lets you interact with the controls and docking zones on the client
  • Cross Browser Support RadDock component supports all major browsers: IE, Firefox, Safari, Opera and Google Chrome.
  • DefaultCS.aspx
  • TelerikBlogsCS.ascx
    • TelerikBlogsCS.ascx
    • TelerikNewsCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • TelerikBlogsCS.ascx.cs
    • TelerikNewsCS.ascx.cs
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.Overview.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register Src="~/Dock/Common/TelerikNewsCS.ascx" TagName="News" TagPrefix="uc2" %>
<%@ Register Src="~/Dock/Common/TelerikBlogsCS.ascx" TagName="Blogs" TagPrefix="uc2" %>
<!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">
            <table>
                <tr>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone2" runat="server" Orientation="Vertical" Width="250px"
                                             MinHeight="400px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock1" runat="server" Title="Blogs" Width="250px" EnableAnimation="true"
                                             EnableRoundedCorners="true" Resizable="true" CssClass="higherZIndex">
                                <ContentTemplate>
                                    <uc2:Blogs ID="BlogsControl" runat="server"></uc2:Blogs>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                    <td style="vertical-align: top">
                        <telerik:RadDockZone ID="RadDockZone1" runat="server" Orientation="Vertical" Width="520px"
                                             MinHeight="400px">
                            <telerik:RadDock RenderMode="Lightweight" ID="RadDock2" runat="server" Title="News" Width="250px" EnableAnimation="true"
                                             EnableRoundedCorners="true" Resizable="true" CssClass="higherZIndex">
                                <ContentTemplate>
                                    <uc2:News ID="NewsControl" runat="server"></uc2:News>
                                </ContentTemplate>
                            </telerik:RadDock>
                        </telerik:RadDockZone>
                    </td>
                </tr>
            </table>
            <br />

        </telerik:RadDockLayout>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance