Dock - 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're experiencing a little taste of what others go through every day -- and you may or may not enjoy it! Regardless, you should be able to face your people with even more wisdom than usual afterward.

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.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?