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

Portal Page

My Contacts
  • Collapse
  • Close

Phone: 1.887.3671.23
E-mail: john@bravo.com
Address: 64 Bay Str, Melville

Horoscope
  • Collapse
  • Close

You need to check in with your family, especially if there are serious issues to work out. You've got the right kind of energy today to go head-to-head with the folks who raised you or just to spend quality time together.

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.
Exchange Rates
  • Collapse
  • Close

Base currency:


Foreign currency:




No Data Available.

Weather
  • Collapse
  • Close
No Data Available.

Creating a Portal

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.

  • DefaultCS.aspx
  • ExchangeRatesCS.ascx
    • ExchangeRatesCS.ascx
    • HoroscopesCS.ascx
    • TelerikBlogsCS.ascx
    • TelerikNewsCS.ascx
    • WeatherCS.ascx
  • ExchangeRatesCS.ascx.cs
    • ExchangeRatesCS.ascx.cs
    • HoroscopesCS.ascx.cs
    • TelerikBlogsCS.ascx.cs
    • TelerikNewsCS.ascx.cs
    • WeatherCS.ascx.cs
  • styles.css
<%@ 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>

Support & Learning Resources

Find Assistance