Question

I’m having some problems trying to dynamically create multiple RadDocks at the same time.

What I’d like to achieve is to have multiple Docks added to the DockZone on a button click, but the only thing I get is first Dock properly created and displayed when the rest of them aren’t displayed (they are displayed after I refresh the webpage) and they are created but floating outside of the zone.

I have similar scenario when creating one Dock at a time and it works like a charm.

Here is the code:

protected void rbAddTickets_Click(object sender, EventArgs e)
        {
            var ticketList = (from t in db.Ticket
                              where t.idManager == idManager && t.Zatvoren == false || t.idManager == null && t.Zatvoren == false
                              select t).ToList();

            var memoTicketList = from t in ticketList
                                 where t.Memo == null || t.Memo == true
                                 orderby t.Firma.Naziv, t.idNadredeniTicket, t.RedniBroj, t.Opis
                                 select t;

            foreach (var ticket in memoTicketList)
            {
                RadDock dock = new RadDock();
                dock.UniqueName = ticket.idTicket.ToString();
                dock.ID = string.Format("RadDock{0}", dock.UniqueName);
                dock.Title = ticket.idNadredeniTicket + "-" + ticket.RedniBroj + " (" + ticket.Firma.Naziv + ")";
                dock.Text = ticket.Opis;
                dock.DockMode = DockMode.Docked;
                //dock.Index = Convert.ToInt32(Session["MinIndex"]) - 1;


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

                //ticket.Memo = true;
                //db.SaveChanges(); OMOGUĆI KASNIJE

                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, rdzIncidenti.ClientID),
                true);
                CreateSaveStateTrigger(dock);

            }
        }

So, to sum everything up. I would like to generate Docks properly; display them immediately, without having to refresh the page and create them inside DockZone.

Any help would be appreciated.

Answer 1

The encountered behavior appears to be caused by problems in saving/loading the layout of the RadDock controls on the page (the missing docks) and setting different ID or/and UniqueName, when recreating the RadDocks after a postback (the floating docks).

The online demo Dock / My Portal is a good example of dynamically creating and persisting the state of RadDocks and the scenario it implements is similar to yours, so I would suggest using it as a reference for your further development. The help article Dynamically Creating RadDock Controls will also be useful, as it lists the main steps for dynamically creating RadDocks.

Overall, the code that you have provided appears to be correct, although I would suggest adding the new RadDocks in the Controls collection of RadDockLayout and docking them in a particular RadDockZone via the Dock method, when inserted in the page on button click. This is implemented in the ButtonAddDock_Click event handler in the linked demo via the following lines of code:

    RadDockZone dz = (RadDockZone)FindControl(DropDownZone.SelectedItem.Text);
    //adding the dock to the docklayout and then docking it to the zone to avoid ViewState issues on subsequent postback
    RadDockLayout1.Controls.Add(dock);
    dock.Dock(dz);

Since I am mostly guessing as to what the rest of your implementation is, I would recommend examining the provided resources and utilizing them in order to achieve the desired functionality.