Product Bundles
DevCraft
All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
Web
Mobile
Document Management
Desktop
Reporting
Testing & Mocking
CMS
UI/UX Tools
Debugging
Free Tools
Support and Learning
Productivity and Design Tools
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
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.
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.
<%@ 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>