Bug? Can only dynamically add one item at a time to a RadDockZone?

[Shadi]

I took the sample code on the website and modified it to add an array of items. Basically I have an array of strings and for each stirng in that array add a new RadDock control to the RadDockZone and have the RadDock's text property = the string value in the array.
From the originial code I have only modified the code below.
This sounds simple enough but for some reason only the first item in the array is being added to the RadDockZone.
So I'm guessing it has to do something with the order of precedence?

private void AddDocks(string text)
        {
            RadDock dock = CreateRadDock(text);
            //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.
            UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

            ScriptManager.RegisterStartupScript(
            dock,
            this.GetType(),
            "AddDock",
            string.Format(@"function _addDock() {{
    Sys.Application.remove_load(_addDock);
    $find('{1}').dock($find('{0}'));
    $find('{0}').doPostBack('DockPositionChanged');
}};
Sys.Application.add_load(_addDock);", dock.ClientID, RadDockZone1.ClientID),
            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);
        }

protected void ButtonAddDock_Click(object sender, EventArgs e)
        {
            List<string> array = new List<string>();
            array.Add("test1");
            array.Add("test2");
            array.Add("test3");

            for (int i = 0; i < array.Count; i++)
            {
                AddDocks(array[i].ToString());
            }
        }

private RadDock CreateRadDock(string text)
        {
            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 = text;
            dock.Width = Unit.Pixel(300);

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

            return dock;
        }

[Dimcho]

Hello Gayatri,

Actually we have already replied your other ticket on the issue. I will go ahead and paste the reply here for your convenience:

The online demo you used as a base in your scenario shows how using AJAX, you can add newly created docks without postback. The new docks are first created in a hidden UpdatePanel,  and then transferred to a dock zone with client-side script. The problem you experience is really due to this script.
You changed the code so it creates three docks in the hidden UpdatePanel but you haven't ensured that all of these docks will be moved to a dock zone. As a result you are able to see only the first RadDock although the other two are also created.
You should modify the script in the handler that is added to the load event of the Application object so that all docks will be transferred to a dock zone. Please look at the following code snippet:

  protected void ButtonAddDock_Click(object sender, EventArgs e)
  {
        List<string> array = new List<string>();
        array.Add("test1");
        array.Add("test2");
        array.Add("test3");
        RadDock[] arrDocks = new RadDock[3];
        for (int i = 0; i < array.Count; i++)
        {
             arrDocks[i] = AddDocks(array[i].ToString());
        }

        ScriptManager.RegisterStartupScript(
        this,
        this.GetType(),
        "AddDocks",
        string.Format(@"function _addDock() {{
        Sys.Application.remove_load(_addDock);
        $find('{0}').dock($find('{1}'));
        $find('{0}').dock($find('{2}'));
        $find('{0}').dock($find('{3}'));
        $find('{1}').doPostBack('DockPositionChanged');
        }};
        Sys.Application.add_load(_addDock);",
        RadDockZone1.ClientID, arrDocks[0].ClientID, arrDocks[1].ClientID, arrDocks[2].ClientID),
         true);
  }

  private RadDock AddDocks(string text)
  {
       RadDock dock = CreateRadDock(text);

       UpdatePanel1.ContentTemplateContainer.Controls.Add(dock);

       CreateSaveStateTrigger(dock);

        return dock;
   }

Kind regards,
Dimcho
the Telerik team

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

[Shadi]

Thanks, your explanation made perfect sense. I took the liberty to modify your example to make it more dynamic in case you do not know how many items in the array you will have.

protected void ButtonAddDock_Click(object sender, EventArgs e)
        {
            List<string> array = new List<string>();
            array.Add("test1");
            array.Add("test2");
            array.Add("test3");

            RadDock[] arrDocks = new RadDock[3];
            for (int i = 0; i < array.Count; i++)
            {
                arrDocks[i] = AddDocks(array[i].ToString());
            }

            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            sb.Append("function _addDock() {{Sys.Application.remove_load(_addDock);");
            for (int i = 0; i < arrDocks.Length; i++)
            {
                sb.Append("$find('");
                sb.Append(RadDockZone1.ClientID);
                sb.Append("').dock($find('");
                sb.Append(arrDocks[i].ClientID);
                sb.Append("'));");
            }
            sb.Append("$find('");
            sb.Append(arrDocks[0].ClientID);
            sb.Append("').doPostBack('DockPositionChanged')}};");
            sb.Append("Sys.Application.add_load(_addDock);");

            ScriptManager.RegisterStartupScript(
            this,
            this.GetType(),
            "AddDocks",
            sb.ToString(),
             true);
        }

[Sophy]

Hello Gayatri,

We are glad to hear that the provided sample code snippet has helped you achieve the requirements of your scenario. 

Thank you for sharing your solution for undefined number of docks with the community. We highly appreciate your efforts. 

If you have other questions, do contact us again.

Best regards,

Sophy
the Telerik team

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