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 may be a little too concerned about your health, but you could use those fears in a positive way. It's a good time to consult with a health provider about healthier options.

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