ajaxRequest + RadWindow + RadDock

[adam]

We have a particular scenario where we have a MasterPage that contains a RadWindow in the RadWindowManager.  When this RadWindow is made visible, certain actions that are made in the RadWindow need to be reflected in the current content page loaded in the MasterPage asyncronously. We are attempting to accomplish this task through various javascript calls.

The goal of our RadWindow is to act as a 'DockCatalog' that contains a listing of the available docks the user can add to the page, and a listing of the current docks already on the page.  Through this window, entries in the database are added/removed that represent the docks for the user.  The content page loaded into the master page contains all of the loaded current docks for the user.

The following javascript is called from the page in the RadWindow.  It's purpose is to call another javascript function to refresh the docks on the content page when the user selects to add or remove a dock item from the page.

// Refresh the docks on the parent page of the radwindows to show the changes
// the user made from the catalog.
function RefreshParentPage()
{
    var rWindow = GetRadWindow();
    if (rWindow != null)
        rWindow.BrowserWindow.RefreshDocks();
}

The RefreshDocks() function exists on the master page and calls the actual AjaxRequest which will cause Docks to be added or removed from the current page.

// Refresh the docks on the page because the user has
// added/removed dock customizations from the catalog window.
function RefreshDocks()
{
    var ajaxManager = <%= RadAjaxManagerMaster.ClientID %>;
    ajaxManager.AjaxRequest("CatalogItemsInUseChanged");
}

The handler for this ajax request will reload the docks on the page based on entries in the database for the user.  That way the RadWindow catalog can add and remove items to this content page.

Our problem is that we are not sure what AjaxSettings to add to the AjaxManager so that we can see the added/removed Docks without refreshing the page.  I know the initiator needs to be the RadAjaxManager, but I am unsure what should be the updated control.  Since the AjaxRequest could add or remove docks to and from the current layout, what control should I place as the updated control.   I only want it to be ajaxify the process of adding and removing docks from the dock layout. 

Below is a snippet of the markup file for the content page that has the docks.

<telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
        OnLoadDockLayout="RadDockLayout1_LoadDockLayout">
        <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="550px">
            <telerik:RadPane ID="RadPane1" runat="server" Scrolling="Y">
                <telerik:RadDockZone runat="server" ID="RadDockZone1" BorderStyle="None">
                </telerik:RadDockZone>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="RadSplitBar1" runat="server" Width="20" Height="100%"></telerik:RadSplitBar>
            <telerik:RadPane ID="RadPane2" runat="server" Scrolling="Y">
                <telerik:RadDockZone BorderStyle="None" ID="RadDockZone2" runat="server">
                </telerik:RadDockZone>
            </telerik:RadPane>
        </telerik:RadSplitter>
        <div style="display: none">
            <asp:UpdatePanel runat="server" ID="UpdatePanel1">
                <Triggers>
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </telerik:RadDockLayout>

Any suggestions?  Is there a better way I can add docks from on the fly actions occuring within the RadWindow?

[Steve]

Hello Adam,

You should add the RadDockZone where the RadDock object is going to be added as updated control. If you do not know which one in runtime, then try adding them programmatically to the AjaxSettings based on some conditions or flags you set.

Sincerely yours,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

Steve, Thanks for the reply.  I am glad someone would be able to decipher what I was trying to explain!

On the Page Load event handler, I added two ajax settings with the ajaxManager as the initiator and both of my two zones as updated controls.  When I do this, it appears to work and the docks are either added or removed.

But then when I perform any command action on the dock (move, collapse, etc...) the command is performed as expected, but the docks commands then become disabled.  They are still visible on the dock, but they can not be clicked.  The docks can't even be moved afterwards.

When I remove the ajax settings I added for the zones, the commands work fine, but then I have the problem I originally posted.  It is like ajaxifying the zone breaks the ability of my async dock commands.

For a reference, I have an UpdatePanel creating triggers on the events for the docks similar one of your examples. here is the code.

AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
saveStateTrigger.ControlID = dock.ID;
saveStateTrigger.EventName = "DockPositionChanged";
UpdatePanel1.Triggers.Add(saveStateTrigger);

saveStateTrigger = new AsyncPostBackTrigger();
saveStateTrigger.ControlID = dock.ID;
saveStateTrigger.EventName = "Command";
UpdatePanel1.Triggers.Add(saveStateTrigger);

The updatePanel is controlling my async dock commands.  So somehow I think the UpdatePanel and the ajax settings for the zones are not playing together nicely.

Thanks,
Adam

[Steve]

Hello Adam,

I've missed the part from your first post, that you are using both UpdatePanel and Prometheus ajax in your app. Indeed using two different ajax controls is not a good idea and you should either use only the AjaxManager or the UpdatePanel. This is due to the fact that once a control fires a request, it will be intercepted by the closest parent control (in this case the UpdatePanel) and the AjaxManager would not have any effect on that control. Similar scenario is observed with AjaxManager and AjaxPanel (more info here).
Take a look at this online example to see how ajaxification of dock objects is handled through MS AJAX. You can inspect the code by using the tabs below the example.

Kind regards,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[adam]

Steve,  Thanks for the advice.

We have taken the approach to leverage your Prometheus Ajax controls over the MSAjax controls.  With that said, I am trying to migrate your portal example to not use UpdatePanels.

We are having some difficulty ajaxifying the commands (and 'DockPositionChanged' event) for the docks.
We would like to do something like this...

AjaxSetting ajaxSetting = new AjaxSetting(dock.ClientID);
ajaxSetting.EventName = "Command";
this.RadAjaxManager1.AjaxSettings.Add(ajaxSetting);

in hopes that it would replace...

AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
saveStateTrigger.ControlID = dock.ID;
saveStateTrigger.EventName = "Command";
UpdatePanel1.Triggers.Add(saveStateTrigger);

Any suggestions??

[Obi-Wan Kenobi]

You should change the following in "MyPortal example":

1) Change the UpdatePanel on the page with aps Panel, e.g.
<asp:Panel ID="PanelForUpdate" runat="server"></asp:Panel>
2) Add an RadAJAXManager on the page
3) Instead triggers you should use AjaxSettings in CreateSaveStateTrigger method. For example:

AjaxSetting setting1 = new AjaxSetting(dock.ID);
setting1.EventName = "DockPositionChanged";
setting1.UpdatedControls.Add(new AjaxUpdatedControl(PanelForUpdate.ClientID, ""));
RadAjaxManager1.AjaxSettings.Add(setting1);

4)Also you should change the ButtonAddDock_Click handler. E.g. you should use $find('RadAajaxManager1').ajaxRequest('');
instead of:
$find('{0}').doPostBack('DockPositionChanged');

I think that's all.

 

[Joerg Schmidt]

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm4.aspx.cs" MasterPageFile="~/Site1.Master"
    Inherits="PortalControls.WebForm4" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ContentPlaceHolderID="Main" runat="server">
    <telerik:RadCodeBlock ID="cb1" runat="server">

        <script type="text/javascript">


            function AjaxRequestButton(controlpath) {

                //Test argument
                //alert(arguments);
                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                ajaxManager.ajaxRequest(controlpath);
            }
        </script>

    </telerik:RadCodeBlock>
    <a href="javascript:AjaxRequestButton('RssFeed.ascx');">Add Modules</a>
    <button id="btnOpen" onclick="openWin(); return false;">
        Add Modules</button>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="module">
        Select Module: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <asp:DropDownList runat="server" ID="DroptDownWidget" Width="150">
            <asp:ListItem Text="RssFeed.ascx" Value="~/PortalControls/RssFeed.ascx" Selected="true"></asp:ListItem>
            <asp:ListItem Text="Weather.ascx" Value="~/PortalControls/Weather.ascx"></asp:ListItem>
        </asp:DropDownList>
        <br />
        Select Docking Zone:
        <asp:DropDownList ID="DropDownZone" runat="server" DataSource="<%#GetZones() %>"
            DataTextField="ID" DataValueField="ClientID" Width="150">
        </asp:DropDownList>
        <asp:Button runat="server" CssClass="button" ID="ButtonAddDock" Text="Add Dock" OnClick="ButtonAddDock_Click" />
    </div>
    <br />
    <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: 15px; background: #f5f4e8;">
        </telerik:RadDockZone>
        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="200"
            Style="background: #d5f0fa; float: left;">
        </telerik:RadDockZone>
        <div style="display: none">
            Hidden UpdatePanel, which is used to receive the new dock controls. We will move
            them with script to the desired initial dock zone.
            <asp:Panel runat="server" ID="PanelForUpdate">
            </asp:Panel>
        </div>
    </telerik:RadDockLayout>
</asp:Content>

  public partial class WebForm4 : System.Web.UI.Page
    {
        private List<DockState> CurrentDockStates
        {
            get
            {
                //Store the info about the added docks in the session. For real life
                // applications we recommend using database or other storage medium
                // for persisting this information.
                List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
                if (Object.Equals(_currentDockStates, null))
                {
                    _currentDockStates = new List<DockState>();
                    Session["CurrentDockStatesMyPortal"] = _currentDockStates;
                }
                return _currentDockStates;
            }
            set
            {
                Session["CurrentDockStatesMyPortal"] = value;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownZone.DataBind();
            }
        }

        public ArrayList GetZones()
        {
            ArrayList zones = new ArrayList();
            zones.Add(RadDockZone1);
            zones.Add(RadDockZone2);

            return zones;
        }

        protected void Page_Init(object sender, EventArgs e)
        {
            //Recreate the docks in order to ensure their proper operation
            for (int i = 0; i < CurrentDockStates.Count; i++)
            {
                if (CurrentDockStates[i].Closed == false)
                {
                    RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
                    //We will just add the RadDock control to the RadDockLayout.
                    // You could use any other control for that purpose, just ensure
                    // that it is inside the RadDockLayout control.
                    // The RadDockLayout control will automatically move the RadDock
                    // controls to their corresponding zone in the LoadDockLayout
                    // event (see below).
                    RadDockLayout1.Controls.Add(dock);
                    //We want to save the dock state every time a dock is moved.
                    CreateSaveStateTrigger(dock);
                    //Load the selected widget
                    LoadWidget(dock);
                }
            }
        }

        protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)
        {
            //Populate the event args with the state information. The RadDockLayout control
            // will automatically move the docks according that information.
            foreach (DockState state in CurrentDockStates)
            {
                e.Positions[state.UniqueName] = state.DockZoneID;
                e.Indices[state.UniqueName] = state.Index;
            }
        }

        protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)
        {
            //Save the dock state in the session. This will enable us
            // to recreate the dock in the next Page_Init.
            CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();
        }

        private RadDock CreateRadDockFromState(DockState state)
        {
            RadDock dock = new RadDock();
            dock.ID = string.Format("RadDock{0}", state.UniqueName);
            dock.ApplyState(state);
            dock.Command += new DockCommandEventHandler(dock_Command);
            dock.Commands.Add(new DockCloseCommand());
            dock.Commands.Add(new DockExpandCollapseCommand());

            return dock;
        }

        private RadDock CreateRadDock()
        {
            int docksCount = CurrentDockStates.Count;

            RadDock dock = new RadDock();
            dock.UniqueName = Guid.NewGuid().ToString();
            dock.ID = string.Format("RadDock{0}", dock.UniqueName);
            dock.Title = "Dock";
            dock.Text = string.Format("Added at {0}", DateTime.Now);
            dock.Width = Unit.Pixel(300);

            dock.Commands.Add(new DockCloseCommand());
            dock.Commands.Add(new DockExpandCollapseCommand());
            dock.Command += new DockCommandEventHandler(dock_Command);

            return dock;
        }

        void dock_Command(object sender, DockCommandEventArgs e)
        {
            if (e.Command.Name == "Close")
            {
                ScriptManager.RegisterStartupScript(
                PanelForUpdate,
                this.GetType(),
                "RemoveDock",
                string.Format(@"function _removeDock() {{
    Sys.Application.remove_load(_removeDock);
    $find('{0}').undock();
    $get('{1}').appendChild($get('{0}'));
    $find('{0}').doPostBack('DockPositionChanged');
}};
Sys.Application.add_load(_removeDock);", ((RadDock)sender).ClientID, PanelForUpdate.ClientID),
                true);

            }
        }

        private void CreateSaveStateTrigger(RadDock dock)
        {
            //Ensure that the RadDock control will initiate postback
            // when its position changes on the client or any of the commands is clicked.
            //Using the trigger we will "ajaxify" that postback.
            dock.AutoPostBack = true;
            dock.CommandsAutoPostBack = true;

            //AsyncPostBackTrigger saveStateTrigger = new AsyncPostBackTrigger();
            //saveStateTrigger.ControlID = dock.ID;
            //saveStateTrigger.EventName = "DockPositionChanged";
            //UpdatePanel1.Triggers.Add(saveStateTrigger);

            //saveStateTrigger = new AsyncPostBackTrigger();
            //saveStateTrigger.ControlID = dock.ID;
            //saveStateTrigger.EventName = "Command";
            //UpdatePanel1.Triggers.Add(saveStateTrigger);

            AjaxSetting setting1 = new AjaxSetting(dock.ID);
            setting1.EventName = "DockPositionChanged";
            setting1.UpdatedControls.Add(new AjaxUpdatedControl(PanelForUpdate.ClientID, ""));
            RadAjaxManager1.AjaxSettings.Add(setting1);

        }

        private void LoadWidget(RadDock dock)
        {
            if (string.IsNullOrEmpty(dock.Tag))
            {
                return;
            }
            Control widget = LoadControl(dock.Tag);
            dock.ContentContainer.Controls.Add(widget);
        }


        protected void ButtonAddDock_Click(object sender, EventArgs e)
        {
            RadDock dock = CreateRadDock();
            //In order to optimize the execution speed we are adding the dock to a
            // hidden update panel and then register a script which will move it
            // to RadDockZone1 after the AJAX request completes. If you want to
            // dock the control in other zone, modify the script according your needs.
            PanelForUpdate.Controls.Add(dock);

            ScriptManager.RegisterStartupScript(
            dock,
            this.GetType(),
            "AddDock",
            string.Format(@"function _addDock() {{
    Sys.Application.remove_load(_addDock);
    $find('{1}').dock($find('{0}'));
    ('RadAajaxManager1').ajaxRequest('');
}};
Sys.Application.add_load(_addDock);", dock.ClientID, DropDownZone.SelectedValue),
            true);

            //Right now the RadDock control is not docked. When we try to save its state
            // later, the DockZoneID will be empty. To workaround this problem we will
            // set the AutoPostBack property of the RadDock control to true and will
            // attach an AsyncPostBackTrigger for the DockPositionChanged client-side
            // event. This will initiate second AJAX request in order to save the state
            // AFTER the dock was docked in RadDockZone1.
            CreateSaveStateTrigger(dock);

            //Load the selected widget in the RadDock control
            dock.Tag = DroptDownWidget.SelectedValue;
            LoadWidget(dock);
        }

        public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {

             RadDock dock = CreateRadDock();
            //In order to optimize the execution speed we are adding the dock to a
            // hidden update panel and then register a script which will move it
            // to RadDockZone1 after the AJAX request completes. If you want to
            // dock the control in other zone, modify the script according your needs.
            PanelForUpdate.Controls.Add(dock);

            ScriptManager.RegisterStartupScript(
            dock,
            this.GetType(),
            "AddDock",
            string.Format(@"function _addDock() {{
    Sys.Application.remove_load(_addDock);
    $find('{1}').dock($find('{0}'));
    ('RadAajaxManager1').ajaxRequest('');
}};
Sys.Application.add_load(_addDock);", dock.ClientID, DropDownZone.SelectedValue),
            true);

            //Right now the RadDock control is not docked. When we try to save its state
            // later, the DockZoneID will be empty. To workaround this problem we will
            // set the AutoPostBack property of the RadDock control to true and will
            // attach an AsyncPostBackTrigger for the DockPositionChanged client-side
            // event. This will initiate second AJAX request in order to save the state
            // AFTER the dock was docked in RadDockZone1.
            CreateSaveStateTrigger(dock);

            //Load the selected widget in the RadDock control
            dock.Tag = DroptDownWidget.SelectedValue;
            LoadWidget(dock);

        }

    }
}

Hi,

 

I have using myprotal sample and use the last code suggestion of using  asp panel and ajaxmanger. However, I tried to add module using ajaxrequest  and add the module to updatepanel and zone1. However, radock’s zone assignment is not missing from the view state.  I have used ajaxrequest because the radwinow close event will trigger the AjaxRequestButton function. Html and c# is provided.

 

 

Thank you,

 

Purvang

[Iana Tsolova]

Hello Joerg,

I prepared a sample project for you (attached to this post) illustrating how to create RadDocks dynamically with RadAjax. Check it out and let me know if I missed something from your logic.

I hope this helps.

Sincerely yours,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joerg Schmidt]

Thank you for the sample code for the portal. However, the controls will be added via ajaxrequest and not on ButtonClick bubbled event. I have a radwindow that loads the controls and when event is fired from radwindow client side code ajaxrequrest is fired .  However, I am getting some load state errors when it tried adding user conrols with radgrid and clientside rowclick feature. I have included some c# code and aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPortalAjax.aspx.cs" MasterPageFile="~/Site1.Master"
    Inherits="MyPortalAjax" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="cntMain" ContentPlaceHolderID="Main" runat="server">
    <div>
        <telerik:RadCodeBlock ID="cb1" runat="server">

            <script type="text/javascript">


                function openWin() {
                    var oWnd = radopen("ModuleList.aspx", "RadWindow1");
                }

                function AjaxRequestButton(arguments) {

                    //Test argument
                    //alert(arguments);
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    ajaxManager.ajaxRequest(arguments);
                }

                function OnClientclose(radWindow) {

                    // Call server if control is non undefined.
                    if (radWindow.argument != undefined)
                        AjaxRequestButton(radWindow.argument);
                }


            </script>

        </telerik:RadCodeBlock>
        <a id="btnOpen" href="javascript:openWin();">Add Modules</a>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadDockLayout1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadDockLayout1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadAjaxManager1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <br />
    </div>
    <br />
    <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: 15px; background: #f5f4e8;">
        </telerik:RadDockZone>
        <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="200"
            Style="background: #d5f0fa; float: left;">
        </telerik:RadDockZone>
    </telerik:RadDockLayout>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        InitialDelayTime="200" IsSticky="True" MinDisplayTime="500" Width="75px">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0px;" />
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false"
        ReloadOnShow="true" runat="server" Skin="Default">
        <Windows>
            <telerik:RadWindow OpenerElementID="btnOpen" ID="RadWindow1" Width="400px" Height="265px"
                Behaviors="Close" runat="server" OnClientClose="OnClientclose" NavigateUrl="ModuleList.aspx"
                OffsetElementID="btnOpen">
            </telerik:RadWindow>
        </Windows>
    </telerik:RadWindowManager>
</asp:Content>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections.Generic;
using Telerik.Web.UI;

public partial class MyPortalAjax : System.Web.UI.Page
{
    private List<DockState> CurrentDockStates
    {
        get
        {
            List<DockState> _currentDockStates = (List<DockState>)Session["CurrentDockStatesMyPortal"];
            if (Object.Equals(_currentDockStates, null))
            {
                _currentDockStates = new List<DockState>();
                Session["CurrentDockStatesMyPortal"] = _currentDockStates;
            }
            return _currentDockStates;
        }
        set
        {
            Session["CurrentDockStatesMyPortal"] = value;
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    public ArrayList GetZones()
    {
        ArrayList zones = new ArrayList();
        zones.Add(RadDockZone1);
        zones.Add(RadDockZone2);

        return zones;
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        for (int i = 0; i < CurrentDockStates.Count; i++)
        {
            if (CurrentDockStates[i].Closed == false)
            {
                RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
                RadDockLayout1.Controls.Add(dock);
                CreateSaveStateTrigger(dock);
                LoadWidget(dock);
            }
        }
    }

    protected void RadDockLayout1_LoadDockLayout(object sender, DockLayoutEventArgs e)
    {
        foreach (DockState state in CurrentDockStates)
        {
            e.Positions[state.UniqueName] = state.DockZoneID;
            e.Indices[state.UniqueName] = state.Index;
        }
    }

    protected void RadDockLayout1_SaveDockLayout(object sender, DockLayoutEventArgs e)
    {
        CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();
    }

    private RadDock CreateRadDockFromState(DockState state)
    {
        RadDock dock = new RadDock();
        dock.ID = string.Format("RadDock{0}", state.UniqueName);
        dock.ApplyState(state);
        dock.Command += new DockCommandEventHandler(dock_Command);
        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());

        return dock;
    }

    private RadDock CreateRadDock()
    {
        int docksCount = CurrentDockStates.Count;

        RadDock dock = new RadDock();
        dock.UniqueName = Guid.NewGuid().ToString().Replace("-", "");
        dock.ID = string.Format("RadDock{0}", dock.UniqueName);
        dock.Title = "Dock";
        dock.Text = string.Format("Added at {0}", DateTime.Now);
        dock.Width = Unit.Pixel(300);

        dock.Commands.Add(new DockCloseCommand());
        dock.Commands.Add(new DockExpandCollapseCommand());
        dock.Command += new DockCommandEventHandler(dock_Command);

        return dock;
    }

    void dock_Command(object sender, DockCommandEventArgs e)
    {
        if (e.Command.Name == "Close")
        {

        }
    }

    private void CreateSaveStateTrigger(RadDock dock)
    {
        dock.AutoPostBack = true;
        dock.CommandsAutoPostBack = true;
    }

    private void LoadWidget(RadDock dock)
    {
        if (string.IsNullOrEmpty(dock.Tag))
        {
            return;
        }
        Control widget = LoadControl(dock.Tag);
        dock.ContentContainer.Controls.Add(widget);
    }

    /// <summary>
    /// Receives control name via AjaxManager request to the raddock layout in RadZone1 (default zone).
    /// </summary>
    /// <param name="sender"></param>
    /// <param name="e"></param>
    public void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {

        RadDock dock = CreateRadDock();
        RadDockLayout1.RegisteredZones[0].Controls.Add(dock);

        CreateSaveStateTrigger(dock);

        dock.Tag = e.Argument;
        LoadWidget(dock);

    }

}

[Iana Tsolova]

Hello Joerg,

I tried your code on my end and it worked ok with me. Could you please check out the attached sample and let me know what differs in your case?

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.