[Solved] Copying the entire docklayout from one page to another page

[NLV]

Hello
I'm trying to copy the docklayout from one page and try to recreate it in another page.

Here is my code-

Default.aspx

<div>
<telerik:RadDockLayout ID="dockLayout" runat="server" OnSaveDockLayout="dockLayout_SaveDockLayout">
<telerik:RadDockZone ID="dockZone" runat="server">
<telerik:RadDock ID="dock" runat="server" UniqueName="dock1">
<Commands>
</Commands>
<ContentTemplate>
<asp:TextBox ID="txtName" runat="server" Text="Dock1"></asp:TextBox>
<br />
<asp:Button ID="btnOK" runat="server" Text="OK1" />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
<br /><br />
<telerik:RadDockZone ID="RadDockZone1" runat="server">
<telerik:RadDock ID="RadDock1" runat="server" UniqueName="dock2">
<Commands>
</Commands>
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text="Dock2"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="OK2" />
</ContentTemplate>
</telerik:RadDock>
</telerik:RadDockZone>
</telerik:RadDockLayout>
<div style="width:100%;text-align:center">
<asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
</div>
</div>

Default.aspx.cs

protected void dockLayout_SaveDockLayout(object sender, DockLayoutEventArgs e)
{
    List<DockState> dockState = dockLayout.GetRegisteredDocksState();
    JavaScriptSerializer ser = new JavaScriptSerializer();
    Session["dock"] = ser.Serialize(dockState);
}

protected void btnSave_Click(object sender, EventArgs e)
{
    Response.Redirect("receivingPage.aspx");
}

In receivingPage.aspx i dont have any controls and i dynamically try to add the dock controls obtained from the other page by creating a dock layout programatically.

receivingPage.aspx.cs

public partial class receivingPage : System.Web.UI.Page
{
    private List<DockState> dockStates;
    private RadDockLayout dockLayout;

    protected override void OnInit(EventArgs e)
    {
        dockLayout = new RadDockLayout();
        dockLayout.LoadDockLayout += new DockLayoutEventHandler(dockLayout_LoadDockLayout);
        JavaScriptSerializer ser = new JavaScriptSerializer();
        dockStates = ser.Deserialize<List<DockState>>(Page.Session["dock"].ToString());
        for (int i = 0; i < dockStates.Count; i++)
        {
            RadDock dock = new RadDock();
            dock.ID = string.Format("RadDock{0}", i);
            dock.ApplyState(dockStates[i]);
            dockLayout.Controls.Add(dock);
        }
        this.Controls.Add(dockLayout);
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

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

But I'm getting emtpy docklayout. Any ideas?

[Pero]

Hello NLV,

Thank you for the source code.

I carefully examined the code, and can say that you are going in the right direction. There seems to be a couple of small issues that cause the entire DockLayout to not be created.

• First of all, besides creating the docks, you should also create the docking zones, and all the controls that are inside the docks. So, I modified your code to also create the docking zones. You should create your own logic to create the child controls of the docks. In the following example we add UserControls to the docks, and store the path to the UserControl inside the RadDock.Tag property: http://demos.telerik.com/aspnet-ajax/dock/examples/myportal/defaultcs.aspx.
• When dynamically creating controls, you should make sure they are added to the form. In your case you are directly adding them to the page, which does not ensure that they will be added to the form. So, that's why I modified your code to add the controls to a PlaceHolder control, placed in the web form of the receivingPage.aspx.

The modified code is attached to the thread.

Kind regards,
Pero
the Telerik team