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 tempted to skip ahead of yourself, but that could bring disaster. Make sure that you're not pushing yourself too hard -- but in a few days, you ought to be able to handle almost anything!

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?