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

Dynamically Created Docks


  • Demo Configurator

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>
<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>

Support & Learning Resources

Find Assistance