All Telerik .NET tools and Kendo UI JavaScript components in one package. Now enhanced with:
New to Telerik UI for ASP.NET AJAX? Download free 30-day trial
Welcome back, Mr. John Smith 4/27/2024
Phone: 1.887.3671.23 E-mail: john@bravo.com Address: 64 Bay Str, Melville
It's easy for you to jump on new opportunities and make the most of your talents today, though you could feel completely exhausted tonight. That's a small price to pay for success, though!
More horoscopes! Check your Daily Single's LoveScopes, Daily Couple's LoveScopes, Daily CareerScopes, Weekly RomanticScopes, Monthly FitnessScopes, more...
Today's Free Reading: When you demand a quick "Yes" or "No" answer and simple explanation, consult your Instant Answer Tarot.
Telerik RadDock is a versatile component for page personalization. It represents a content placeholder, which can be moved, docked/undocked, resized, pinned, minimized and so on. The customized page layout can be saved to a file or database and reloaded when needed, which is a typical requirement for portals and extranets.
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.
<%@ Page Language="c#" AutoEventWireup="true" %> <%@ Register Src="~/Dock/Common/TelerikNewsCS.ascx" TagName="News" TagPrefix="uc2" %> <%@ Register Src="~/Dock/Common/TelerikBlogsCS.ascx" TagName="Blogs" TagPrefix="uc2" %> <%@ Register Src="~/Dock/Common/HoroscopesCS.ascx" TagName="Horoscopes" TagPrefix="uc2" %> <%@ Register Src="~/Dock/Common/WeatherCS.ascx" TagName="Weather" TagPrefix="uc2" %> <%@ Register Src="~/Dock/Common/ExchangeRatesCS.ascx" TagName="ExchangeRates" 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" /> <telerik:RadFormDecorator RenderMode="Lightweight" ID="DemoFormDecorator" runat="server" DecoratedControls="All" Skin="Metro" ControlsToSkip="Zone" DecorationZoneID="decorate" EnableRoundedCorners="false" /> <div class="demo-container size-custom" id="decorate"> <telerik:RadDockLayout runat="server" ID="RadDockLayout1" EnableEmbeddedSkins="false" Skin="None"> <div> <table cellspacing="0" cellpadding="0"> <tr> <td colspan="3" style="background: url(images/headerBg.gif) repeat-x;"> <img src="images/headerLeft.gif" alt="" /> </td> </tr> <tr> <td style="width: 222px;"> <telerik:RadDockZone runat="server" ID="RadDockZone1" Orientation="vertical" Style="border: 0; width: 220px;"> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="UserInfo" Title="My Portal" Width="220px" EnableAnimation="true" CssClass="user-info"> <ContentTemplate> <p class="innerWrp"> Welcome back,<br /> Mr. John Smith<br /> <%= DateTime.Now.ToShortDateString() %> </p> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="MyContacts" Title="My Contacts" Width="220px" CssClass="my-contacts" EnableAnimation="true"> <ContentTemplate> <p class="innerWrp"> Phone: 1.887.3671.23<br /> E-mail: john@bravo.com<br /> Address: 64 Bay Str, Melville </p> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="Horoscopes" Title="Horoscope" Width="220px" EnableAnimation="true" CssClass="horoscope"> <ContentTemplate> <div class="innerWrp"> <uc2:Horoscopes ID="HoroscopesControl" runat="server"></uc2:Horoscopes> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> <td style="width: 222px;"> <telerik:RadDockZone runat="server" ID="RadDockZone2" Orientation="vertical" Style="border: 0px; width: 220px;"> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="Currency" Title="Exchange Rates" Width="220px" CssClass="exchange-rates" EnableAnimation="true"> <ContentTemplate> <div class="innerWrp"> <uc2:ExchangeRates ID="CurrencyControl" runat="server"></uc2:ExchangeRates> </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="Weather" Title="Weather" Width="220px" EnableAnimation="true" CssClass="weather"> <ContentTemplate> <div class="innerWrp"> <uc2:Weather ID="WeatherControl" runat="server"></uc2:Weather> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> <td style="width: 222px;"> <telerik:RadDockZone runat="server" ID="RadDockZone3" Orientation="vertical" Style="border: 0px; width: 220px;"> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="TelerikBlogs" Title="Telerik Blogs" Width="220px" EnableAnimation="true" CssClass="telerik-blogs"> <ContentTemplate> <div class="innerWrp"> <uc2:Blogs ID="BlogsControl" runat="server"></uc2:Blogs> </div> </ContentTemplate> </telerik:RadDock> <telerik:RadDock RenderMode="Lightweight" runat="server" ID="News" Title="Telerik News" Width="220px" EnableAnimation="true" CssClass="telerik-news"> <ContentTemplate> <div class="innerWrp"> <uc2:News ID="NewsControl" runat="server"></uc2:News> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </td> </tr> </table> </div> </telerik:RadDockLayout> </div> </form> </body> </html>