Dock - Dynamically Created Docks


Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

If you want to create RadDock controls dynamically you should do it in the Init event of the page, in order to allow the RadDockLayout to automatically manage their positions. You could create RadDock controls in other events, but you should recreate them in Init when the next postback or AJAX request occurs.

This example utilizes ASP.NET AJAX and adds the newly created docks without postback. The new docks are created into a hidden UpdatePanel and then transferred to a dock zone with client-side script. This technique eliminates the need to update the whole dock zone and all of its children.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Dock.DynamicDocks.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" />
    <script src="scripts.js" type="text/javascript"></script>
    <script type="text/javascript">
        //<![CDATA[
        serverIDs({
            ajaxID: "<%= RadAjaxPanel1.ClientID%>",
            ajaxServerID: "<%= RadAjaxPanel1.UniqueID %>"
        });
        //]]>
    </script>
</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-wide">
        <div style="padding-bottom: 10px;">
        </div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="500">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"
                              OnAjaxRequest="RadAjaxPanel1_AjaxRequest" Width="640px">
            <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
                                   OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
                <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200"
                                     Style="float: left; margin-right: 20px;">
                </telerik:RadDockZone>
                <telerik:RadDockZone Width="300" MinHeight="200" runat="server" ID="RadDockZone2"
                                     Style="float: left;">
                </telerik:RadDockZone>
                <br class="qsf-clear-float" />
            </telerik:RadDockLayout>
        </telerik:RadAjaxPanel>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <qsf:Button runat="server" ID="ButtonAddDock" Text="Add Dock" OnClientClicked="addDock" AutoPostBack="false" />
                <qsf:Button runat="server" ID="ButtonPostback" Text="Do Postback" />
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?