A la "Dynamically Created Docks" article. --> A control with ID '' could not be found for the trigger in UpdatePanel

[Agat]

Hello!

I am trying to implement the similar to this
http://demos.telerik.com/ASPNET/prometheus/Dock/Examples/DynamicDocks/DefaultCS.aspx article functionality.

I also have 2 RadZones (the second is like a cart).

But the difference is:
instead of "Add Dock" i have "Search" button. So on its click I have to completely change (clear and add found items) the first RadZone and, possible some elements from the second one.

My current Search method is:


private void SearchSongs()
zoneSearch.Controls.Clear(); 

 

zoneSearch.Docks.Clear();

CurrentDockStates.Clear();

 

DataTable dt = <-- getting data

 

foreach (... dr in dt.Rows)

 

{

 

RadDock rd = new RadDock();

 

rd.UniqueName =

Guid.NewGuid().ToString();

 

rd.Text = dr.Title;

rd.Title = dr.Title;

rd.ID =

string.Format("RadDock{0}", rd.UniqueName);

 

rd.DockMode =

DockMode.Docked;

 

rd.Commands.Add(

new DockCloseCommand());

 

rd.Commands.Add(

new DockExpandCollapseCommand());

 

rd.Command +=

new DockCommandEventHandler(dock_Command);

 

CreateSaveStateTrigger(rd); //  <--   but here an exception occured. actually, inside the method here: UpdatePanel1.Triggers.Add(saveStateTrigger);

 

 

 

zoneSearch.Controls.Add(rd);

can you give me a clue how should I manage this situation?

and what should I do to add another button handler (for instance, search2Button).

I hope the provided code is enough. All the code similar to the sample's one and another commands connected to moving, closing etc Docks works ok. The only problem (and difference) is in Search button work.

Thank you and the best regards,
Boleslav

[Stanimir]

Hi Agat,

You can handle this situation by following these steps:
1. After creating the RadDock you should add it to the UpdatePanel1.ContentTemplateContainer.Controls collection

UpdatePanel1.ContentTemplateContainer.Controls.Add(rd);

2. You should register client script which changes the wanted RadZones and docks the created RadDock to the SearchZone.

ScriptManager.RegisterStartupScript(
 rd,
 this.GetType(),
 "rd",
 string.Format(@"function _addSearchDock() {{
 Sys.Application.remove_load(_addSearchDock);
 var zone = $find('{1}');
 var docks = zone.get_docks();
 for(var i = 0; i < docks.length; i++)
 {{
   docks[i].set_closed(true);
 }}
 zone.dock($find('{0}'));
 $find('{0}').doPostBack('DockPositionChanged');
 }};
 Sys.Application.add_load(_addSearchDock);", rd.ClientID, zoneSearch.ClientID),
 true
);

Here is an example of your SearchSongs function

private void SearchSongs()
{
   zoneSearch.Controls.Clear();
   zoneSearch.Docks.Clear();
   CurrentDockStates.Clear();

   //DataTable dt = <-- getting data
   //foreach (... dr in dt.Rows)
  //{

   RadDock rd = new RadDock();
   rd.UniqueName = Guid.NewGuid().ToString();
   rd.Text = "Sample Text"; // rd.Text = dr.Title;
   rd.Title = "Sample Title";  // rd.Title = dr.Title;
   rd.ID = string.Format("RadDock{0}", rd.UniqueName);
   rd.DockMode = DockMode.Docked;
   rd.Commands.Add(new DockCloseCommand());
   rd.Commands.Add(new DockExpandCollapseCommand());
   rd.Command += new DockCommandEventHandler(dock_Command);

   //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(rd);

   ScriptManager.RegisterStartupScript(
   rd,
   this.GetType(),
       "rd",
       string.Format(@"function _addSearchDock() {{
       Sys.Application.remove_load(_addSearchDock);
       var zone = $find('{1}');
       var docks = zone.get_docks();
       for(var i = 0; i < docks.length; i++)
       {{
           docks[i].set_closed(true);
       }}
       zone.dock($find('{0}'));
       $find('{0}').doPostBack('DockPositionChanged');
       }};
       Sys.Application.add_load(_addSearchDock);", rd.ClientID, zoneSearch.ClientID),
   true);



   CreateSaveStateTrigger(rd);
}

Sincerely yours,
Stanimir
the Telerik team

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

[Agat]

Thank you for the answer,

but if I my SearchSongs method finds tens or even hundred+ songs, 
I should do it in iteration

UpdatePanel1.ContentTemplateContainer.Controls.Add(rd);   
 
 ScriptManager.RegisterStartupScript(...

 ?

[Stanimir]

Hi Agat,
Here is another approach of handling the situation.
1. Put the zoneSearch RadZone in to an updatepanel and assign a trigger for the SearchButton Click event.

<asp:updatepanel runat="server" id="SearchUpdatePanel">
   <Triggers>
       <asp:asyncpostbacktrigger controlid="ButtonSearch" eventname="Click" />
   </Triggers>
   <ContentTemplate>
       <telerik:raddockzone Width="300" MinHeight="200" runat="server" id="zoneSearch" Style="float:left;"></telerik:raddockzone>
   </ContentTemplate>
</asp:updatepanel>

2. In your search method close all docks that are docked to zoneSearch RadZone.

foreach (RadDock dock in zoneSearch.Docks)
{
    dock.Closed = true;
}

Here is an example of the SearchSongs method

private void SearchSongs()
{

    foreach (RadDock dock in zoneSearch.Docks)
    {
        dock.Closed = true;
    }

    //DataTable dt = <-- getting data

    //foreach (... dr in dt.Rows)
    //{
          RadDock rd = new RadDock();
          rd.UniqueName = Guid.NewGuid().ToString();
          rd.Text = "Sample Text"; // rd.Text = dr.Title;
          rd.Title = "Sample Title";  // rd.Title = dr.Title;
          rd.ID = string.Format("RadDock{0}", rd.UniqueName);
          rd.DockMode = DockMode.Docked;
          rd.Commands.Add(new DockCloseCommand());
          rd.Commands.Add(new DockExpandCollapseCommand());
          rd.Command += new DockCommandEventHandler(dock_Command);
          zoneSearch.Controls.Add(rd);
    //}
}

3. In order to be sure that you do not recreate closed RadDocks, you need to add !CurrentDockStates[i].Closed check before creating the docks in the Page_Init method.

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)
        {
            RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
            RadDockLayout1.Controls.Add(dock);
            CreateSaveStateTrigger(dock);
        }
    }
}

Kind regards,
Stanimir
the Telerik team

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

[Agat]

Good day!

Thank you for this detailed information.

I remade my page:

added two updatepanels for every radzone
and changed content accorgingly to the associated to every zone button (with defined triggers). Everything worked well but I noticed some strange behaviour:
before I added  UpdateMode="Conditional" parameter to UpdatePanels, they were updated if any other UpdatePanel was processed.

Even this was ok. RadDocks were able to be dragged and closed. The strange stuff was if postback was invoked in the second UpdatePanel, all the  RadDocks then from the first UpdatePanel became static. i.e. no dragging options and close button didn't work (and visa versa): I explored those RadDock objects with DeveloperToolbar and their properties "control" and (don't remember the second one exactly) seems "event" became empty.
After "prolematic" panel forced reloading child RadDocks became ok, but the problem occured with the second one panel.

The page structure is pretty simple and similar to the sample above. I will provide you all the code if it's not enough, but can it be just some simple "user error"? It's similar to the Docks just are not initialized.

Thank you and the best regards,
Boleslav

[Stanimir]

Hi Agat,

Please open a support ticket and send us a sample runnable project, so we can reproduce the problem. Once we receive it, we will be able to help you.


Sincerely yours,
Stanimir
the Telerik team

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

[Oliver Popov]

Thank you for the answers... If you need sourced for reproducing this problem I'll probably wait if the error appeares, cas need to modify current pages (lots of data connected to the database)...
 here were just thoughts it's known problem: I had 2 radzones in 2 updatepanels, so if I don't set UpdateMode="Conditional" for the panels and update items from the second one, then items from the first one getting not active (the first panel content is updated automatically - i.e. callback is affects it). So, if it's not "famous" problem, then I will pass it for a while.

Thanks, anyway.

[Obi-Wan Kenobi]

You couldn't update only one particular RadDockZone or a RadDock via Ajax. You should update all RadDockZones while the RadDocks are docked.

There a lot of online examples which illustrates how to use RadDock with AJAX here:
http://demos.telerik.com/ASPNET/Prometheus/Dock/Examples/AutoPostBack/DefaultCS.aspx