I am dynamically creating a floating dock with a fixed ID and fixed UniqueName in the Page_Init event. When I click on a button inside an UpdatePanel to make a callback, I am creating a new dock object, with the same ID and UniqueName, in hope that it will update the existing dock on the client with the new properties.
When outside updatePanel, this works fine (the existing dock gets updated on the client).
When inside updatePanel, and docked, this works fine.
When inside updatePanel, and undocked, I get 2 docks on the client.
| protected void Page_Init(object sender, EventArgs e) |
| { |
| if (!IsPostBack) |
| { |
| RadDock dock = new RadDock(); |
| RadDockZone1.Controls.Add(dock); |
| dock.Undock(); // comment this out to make it docked |
| dock.Text = DateTime.Now.ToString(); |
| dock.ID = "FIXED"; |
| dock.UniqueName = "FIXED"; |
| } |
| } |
| protected void Button1_Click(object sender, EventArgs e) |
| { |
| RadDock dock = new RadDock(); |
| RadDockZone1.Controls.Add(dock); |
| dock.Undock(); // comment this out to make it docked |
| dock.Text = DateTime.Now.ToString(); |
| dock.ID = "FIXED"; |
| dock.UniqueName = "FIXED"; |
| } |
| <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> |
| <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head runat="server"> |
| <title>Untitled Page</title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| </div> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <asp:UpdatePanel ID="UpdatePanel1" runat="server"> |
| <ContentTemplate> |
| <telerik:RadDockLayout ID="RadDockLayout1" Runat="server"> |
| <telerik:RadDockZone ID="RadDockZone2" Runat="server" Height="300px" |
| Width="300px"> |
| </telerik:RadDockZone> |
| <telerik:RadDockZone ID="RadDockZone1" Runat="server" Height="300px" |
| Width="300px"> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| <asp:Button ID="Button1" runat="server" onclick="Button1_Click" |
| Text="Make Callback" /> |
| </ContentTemplate> |
| </asp:UpdatePanel> |
| </form> |
| </body> |
| </html> |
9 Answers, 1 is accepted
The problem you experience is due to updating RadDock with AJAX, making the dock undocked and allowing the dock being dragged. When dragging the dock you move it outside the update panel and this causes AJAX not working properly as it attempts to recreate the dock at the place it was previously located as well as the dock is moved at the new place and stays there. In this way two docks with the same id exist on the page and this leads to an exception.
This is a common problem of controls which can be moved in the DOM tree. You should not allow the dock going outside a zone and updating the whole layout of the control as you do. As a workaround I suggest setting the dock's property DockMode to "Docked"(which does not allow the dock being dragged outside a zone). You should also not use the Undock method if you place the control in update panel as it makes the dock being child of the body and therefore move it outside the update panel.
For your convenience I have attached a modified version of your page. Please, let me know if you need further assistance.
All the best,
Sophy
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
When the dock's script gets rendered inside the update panel, couldn't it check that a dock with the same id / unique name exists in "floating docks" (wherever that is in the DOM) and update the existing dock?
As far as we have investigated the matter, the MS AJAX framework throws an exception of the kind
"Sys.InvalidoperationException: Two components with the same id "RadDock1" can't be added to the application"
before any RadDock's code is ever executed and therefore we are unable to solve the problem. We will continue our investigation but this is how much we know as of now.
Sincerely yours,
Petya
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Perhaps I did not make it clear enough in my previous post that for what we know now this behavior cannot be fixed because the MS AJAX framework throws the exception before our code starts and we are unable to work for providing some workaround so to support this scenario. Of course we will still keep gathering information in this direction but as of today we are not able to provide any out-of-the box solution.
All the best,
Petya
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Yes, your point was perfectly clear on the problem.
Now, our situation is that we are developing an advanced UI Layer in an enterprise framework and using Telerik's controls as implementation. We are implementing advanced scenarios with Telerik's controls. We are even synchronizing the state of every Telerik control to our own state inside our MVC implementation to enable scenarios that are not even possible in asp.net.
Now, the fact is that _we need_ to be able to update floating docks during a callback. We would like to know if you see a solution and have an idea when it will be available. Otherwise, we will take another approach.
The fact that asp.net throws an Sys.InvalidOperationException is your concern. You say that no dock code is called before this exception, so you can't do anything about this. However, there is code running on the server before the code gets sent to the client.
To summarize, we would like to know if / when floating docks will be updatable in callbacks.
Thank you
RadDock Prometheus is based on ASP.NET AJAX and relies on the framework to instantiate its component on the client. The information we need to solve the problem needs to come from the framework, however at the time the framework code executes it throws the error before we are ever able to handle the situation. This is why at this point we do not see any possibility to solve the issue.
All the best,
Petya
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
Hello,
The “Prometheus” controls are built entirely on top of the industry-standard ASP.NET AJAX, utilizing its common client-side framework and programming model. This however, does not result in mere AJAX capabilities, which have been present in the RadControls suite for ASP.NET since 2005 but also in new client-side features, which are made possible by the underlying framework. We are also able to optimize performance and simplify deployment with the MS AJAX framework. Additionally, ASP.NET AJAX framework is widely adopted now (it is now integral part of ASP.NET v3.5) and has proved very stable and reliable for the developer community. All these benefits justify our decision to base our controls on ASP.NET AJAX.
As to the problem at hand - in this particular case we are currently investigating a possible workaround that will "trick" the MS Ajax framework into "believing" that docks are where they were when the page was loaded. However, even if this succeeds, it will be a hack of the framework, rather than a correct, reliable solution.
The main problem comes when deciding whether it is good to have RadDock in MS AJAX environment is to answer the question how a dock should interact with the page.
There are many such possibilities - and most of them will work just fine. Thus, providing dock functionality is quite useful. However, the MS AJAX (or any AJAX framework for that matter) implementation relies on the concept of UpdatePanels, and the controls of those UpdatePanels are supposed to stay within the UpdatePanels, and not move somewhere else on the page on the client.
In the particular scenario, it is exactly this that is happening. However, if you consider the simple fact that AJAX is UpdatePanel-centric, and if you consider that RadDock is little more than a moveable panel, then the right way to go would be to wrap all UpdatePanels in RadDock controls. The result would be that RadDock will work fine, and AJAX will work fine. However, if the RadDock objects themselves are expected to be both moveable around the page AND be updatable from their original UpdatePanel - this will not work out of the box (at least for now).
All the best,
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center