Dock - My Portal


Hidden UpdatePanel, which is used to help with saving state when minimizing, moving and closing docks. This way the docks state is saved faster (no need to update the docking zones).

Demo Configurator

  • Select ModuleExchangeRates
  • Select Docking ZoneRadDockZone1
  • Add Dock (AJAX)
  • Clear Dock State
  • Make PostBack
Isolate this demo as a stand-alone application

This is advanced version of the Dynamic Docks example, demonstrating how to add UserControls in programmatically created RadDock controls.

<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.MyPortal.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-custom">
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        <asp:UpdatePanel runat="server" ID="UpdatePanel2" ChildrenAsTriggers="false" UpdateMode="Conditional">
            <ContentTemplate>
                <br />
                <asp:Panel ID="Panel1" runat="server" Width="820px">
                    <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                                           OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
                        <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="250" MinHeight="200"
                                             Style="float: left; margin-right: 15px">
                        </telerik:RadDockZone>
                        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="250" MinHeight="200"
                                             Style="float: left; margin-right: 15px; background: #f5f4e8;">
                        </telerik:RadDockZone>
                        <telerik:RadDockZone runat="server" ID="RadDockZone3" Width="250" MinHeight="200"
                                             Style="background: #d5f0fa; float: left;">
                        </telerik:RadDockZone>
                    </telerik:RadDockLayout>
                </asp:Panel>
            </ContentTemplate>

        </asp:UpdatePanel>
        <div class="hidden-container">
            Hidden UpdatePanel, which is used to help with saving state when minimizing, moving
            and closing docks. This way the docks state is saved faster (no need to update the
            docking zones).
            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
            </asp:UpdatePanel>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList ID="DroptDownWidget" Label="Select Module" Size="Wide" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Text="ExchangeRates" Value="~/Dock/Common/ExchangeRatesCS.ascx" Selected="true" />
                                    <telerik:DropDownListItem Text="TelerikNews" Value="~/Dock/Common/TelerikNewsCS.ascx" />
                                    <telerik:DropDownListItem Text="TelerikBlogs" Value="~/Dock/Common/TelerikBlogsCS.ascx" />
                                    <telerik:DropDownListItem Text="Horoscopes" Value="~/Dock/Common/HoroscopesCS.ascx" />
                                    <telerik:DropDownListItem Text="Weather" Value="~/Dock/Common/WeatherCS.ascx" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList ID="DropDownZone" Label="Select Docking Zone" Size="Wide" DataTextField="ID" DataValueField="ClientID" runat="server" />
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ButtonAddDock" Text="Add Dock (AJAX)" Size="Wide" OnClick="ButtonAddDock_Click"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" ID="ButtonClear" Text="Clear Dock State" OnClick="ButtonClear_Click" Size="Medium"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ButtonPostBack"  Size="Medium" Text="Make PostBack" OnClick="ButtonPostBack_Click"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            loadingPanelID: "<%= RadAjaxLoadingPanel1.ClientID %>",
            panelID: "<%= Panel1.ClientID %>"
        });
        //]]>
    </script>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?