This is a migrated thread and some comments may be shown as answers.

problem updating dynamically created floating dock in callback

9 Answers 173 Views

Dock

This is a migrated thread and some comments may be shown as answers.

etrich asked on 04 Dec 2007, 09:47 PM

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

answered on 05 Dec 2007, 09:37 AM

DynamicDock.zip

Hello Etrich,

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

answered on 19 Dec 2007, 04:13 PM

Hi Petya,

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

answered on 11 Jan 2008, 07:52 AM

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,

Tervel
the Telerik team

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