Using RadDock Instead Of RadDockZone

[Virgil Rodriguez]

Hi Telerik,

I have a dynamically created floating RadDock called "FormAreaDock" that I use to act like a box - sort of a placeholder - for other dynamically floating RadDocks.

I am purposely not using RadDockZones because as far as I know, zones cannot be moved anywhere I want to move it.

I have been able to move the "FormAreaDock" to virtually any position and any other floating RadDocks that are within the bounds of the "FormAreaDock" also move along with it.

My problem is that it only works when I'm running the program in my development machine. Once I publish (deploy) it, it refuses to work as it should and I am getting the following error message:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; InfoPath.2; .NET4.0C; .NET4.0E)
Timestamp: Thu, 7 Jun 2012 23:19:50 UTC


Message: Sys.WebForms.PageRequestManagerServerErrorException: Invalid JSON primitive: {"Top":346,"Left":969,"DockZoneID":"","Collapsed":false,"Pinned":false,"Resizable":true,"Closed":false,"Width":"701px","Height":"904px","ExpandedHeight":0,"Index":-1}.
Line: 6
Char: 84093
Code: 0
URI: http://xm-wvl-02:4201/Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=AppContent_ctlAdminTemplatesFreeStyleEdit_RadScriptManager1_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a1f68db6e-ab92-4c56-8744-13e09bf43565%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2011.3.1305.40%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a8cba3cb6-b29d-4c9f-be22-7b43626a420a%3a16e4e7cd%3aed16cbdc%3af7645509%3a24ee1bba%3af46195d3%3a854aa0a7%3a874f8ea2%3a5a6d9d23%3a7c926187%3a8674cba1%3ab7778d6c%3ac08e9f8a%3aa51ee93e%3a59462f1%3a5f39f986%3a1e771326%3aaa288e2d

So, my questions are:

1. Why do I not get that error in my development machine?
2. What factors should I take into consideration to avoid an INVALID JSON error?
3. Is there a better way of doing what I'm trying to achieve?

Thank you.

[Slav]

Hello Virgil,

This type of error occurs when a floating RadDock is updated via AJAX. When you drag the dock control you move it outside the update panel and AJAX attempts to recreate the dock at the place it was previously located. This results in two docks with the same id on the page, which causes an exception. The examined behavior is common for all controls which could be moved in the DOM.

It is strange that the problem is reproducible only on a published web site. Please try any of the following approaches for resolving it:

• Place all RadDocks in RadDockZones that are wrapped in the UpdatePanel and do not allow floating dock controls.
• Remove the UpdatePanel that AJAXifies the RadDock control.
• On the event DockPositionChanged of RadDock append the dock element in the UpdatePanel to ensure that it will remain in its bounds after the dragging is complete as shown in the following sample:

  <script type="text/javascript">
      function OnClientDockPositionChanged(sender, args) {
          $get("<%=Updatepanel1.ClientID %>").appendChild(sender.get_element());
      }
  </script>
  <div>
      <telerik:RadDockLayout runat="server" ID="RadDockLayout">
          <asp:UpdatePanel ID="Updatepanel1" runat="server">
              <ContentTemplate>
                  <telerik:RadDock ID="RadDock1" runat="server" OnClientDockPositionChanged="OnClientDockPositionChanged">
                  </telerik:RadDock>
                  <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="true" Text="Postback">
                  </telerik:RadButton>
              </ContentTemplate>
          </asp:UpdatePanel>
      </telerik:RadDockLayout>
  </div>
  </form>

I hope the provided information helps. Please let us know if you run into more difficulties.

Greetings,
Slav
the Telerik team

[Virgil Rodriguez]

Thank you Slav. I will try your suggestions.