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

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

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

  • DefaultCS.aspx
  • ExchangeRatesCS.ascx
    • ExchangeRatesCS.ascx
    • HoroscopesCS.ascx
    • TelerikBlogsCS.ascx
    • TelerikNewsCS.ascx
    • WeatherCS.ascx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ExchangeRatesCS.ascx.cs
    • HoroscopesCS.ascx.cs
    • TelerikBlogsCS.ascx.cs
    • TelerikNewsCS.ascx.cs
    • WeatherCS.ascx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.MyPortal.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<!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" 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" CssClass="docks-panel">
                    <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>

Support & Learning Resources

Find Assistance