some questions on dynamically generated RadDocks

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Jun 2009

    Posted 20 Jun 2009 Link to this post

    Hi, I'm new to working with RadDocks and have some questions (probably pretty basic ones).

    My RadDocks are dynamically generated by a Button_Click event, and then recreated in the Page_Init event on each PostBack.  In RadDock1_SaveDockLayout I have:
    CurrentDockStates = RadDockLayout1.GetRegisteredDocksState();

    In Page_Init I call the ApplyState method of each RadDock and pass it the appropriate element in CurrentDockStates.  Then I add the RadDocks to RadDockLayout1's Controls.

    Everything seems to work pretty well, but I'm not sure I'm understanding why it works.

    (1) If I look at the info in CurrentDockStates, it's the info I saved at the end of the previous PostBack (as it should be, since that's when I saved it).  But I've moved the RadDock since then. (That is, it's been manually dragged from one DockZone to another by the client.)  And yet, it loads (correctly) in the position I moved it to.  So I guess there's some hidden code built into the RadDock controls that updates their position.  But if so, why is it necessary to call ApplyState at all?  I mean, if the control has more up to date info already than the info I'm passing to ApplyState.

    (2) The example on dynamically generated RadDocks also had some code in RadDockLayout1_LoadDockLayout to update the Positions and Indices of the RadDocks. But even if I leave this code out, my RadDocks seem to still be showing up in the right place on PostBack.  Is the LoadDockLayout code only necessary if I were loading their positions from a file (e.g. a database)?  And why would that be necessary when I'm already calling ApplyState?

    (3) The one thing that isn't working right is closing the RadDocks.  I can close them, but they reappear as soon as I have a PostBack.  How can I fix this?

    Thanks in advance for answering these questions

  2. Pero
    Pero avatar
    1156 posts

    Posted 25 Jun 2009 Link to this post

    Hello Tim,

    In reference to your questions:

    1. There is no code in the RadDocks that updates their position. As you may have noticed in the Dynamically Created Docks example, in the Code Behind (DefaultCS.aspx.cs) there is a method called CreateSaveStateTrigger(RadDock dock). In this method the AutoPostBack property of the created dock is set to true, and the CommandsAutoPostBack property is also set to true. These properties cause AJAX post back to the server when the dock is moved (its position is changed) or any of the dock commands is clicked, respectively. Additionally the OnSaveDockLayout event is fired on the post back which saves the updated information (which if you make another post back will be applied).
    2. The LoadDockLayout event occurs when it is appropriate for the application to load the state of all its RadDock controls when that state has been previously saved by a SaveDockLayout event handler.You could use it only once -when the page is loaded for the first time.  
    3. This issue is related to the RadDock and exists in the version that you are using. It is already fixed and you can download the latest internal build or the BETA for the Q2 2009 (You can see that the close command is working correctly in the online examples for the BETA version). Due to the newly added animations(in the last version), if you set the RadDock's EnableAnimation property to false (by default is false) the event for the close command will not be fired. Till the next official release you can workaround this problem by overriding the set_closed method as is shown below:

      <%@ 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" "">  
      <html xmlns="">  
      <head runat="server">  
          <script type="text/javascript">  
              function dockInitialize(obj, args)  
          <form id="Form1" method="post" runat="server">  
          <asp:ScriptManager ID="ScriptManager" runat="server"/>  
              Select Module: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  
              <asp:DropDownList runat="server" ID="DroptDownWidget" Width="150">  
                  <asp:ListItem Text="ExchangeRates.ascx" Value="~/UserControls/ExchangeRates.ascx"  
                  <asp:ListItem Text="Horoscopes.ascx" Value="~/UserControls/Horoscopes.ascx"></asp:ListItem>  
                  <asp:ListItem Text="News.ascx" Value="~/UserControls/News.ascx"></asp:ListItem>  
                  <asp:ListItem Text="Weather.ascx" Value="~/UserControls/Weather.ascx"></asp:ListItem>  
              <br />  
              Select Docking Zone:  
              <asp:DropDownList ID="DropDownZone" runat="server" DataSource="<%#GetZones() %>"  
                  DataTextField="ID" DataValueField="ClientID" Width="150">  
              <asp:Button runat="server" ID="ButtonAddDock" Text="Add Dock (AJAX)" OnClick="ButtonAddDock_Click" />  
              <asp:Button runat="server" ID="ButtonPostBack" Text="Make PostBack" OnClick="ButtonPostBack_Click" />  
          <asp:UpdatePanel runat="server" ID="UpdatePanel2">  
                  <br />  
                  <telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"  
                      <telerik:RadDockZone runat="server" ID="RadDockZone1" Width="300" MinHeight="200"  
                          Style="float: left; margin-right: 15px; background: #f5f4e8;">  
                      <telerik:RadDockZone runat="server" ID="RadDockZone2" Width="300" MinHeight="200"  
                          Style="background: #d5f0fa; float: left;">  
                  <asp:AsyncPostBackTrigger ControlID="ButtonAddDock" EventName="Click" />  
          <div style="width: 0px; height: 0px; overflow: hidden; position: absolute; left: -10000px;">  
              Hidden UpdatePanel, which is used to help with saving state when minimizing, moving  
              and closing docks. This way the docks state is saved faster (no need to update the  
              docking zones).  
              <asp:UpdatePanel runat="server" ID="UpdatePanel1">  
           <script type="text/javascript">  
               //FIX the problem when dock is without animation.  
               function OverrideClose()  
                   if (Telerik.Web.UI) {  
                       if (Telerik.Web.UI.RadDock) {  
                           var old_SetClosed = Telerik.Web.UI.RadDock.prototype.set_closed;  
                           Telerik.Web.UI.RadDock.prototype.set_closed = function(value, playAnimation)  
                               if (value == true) {  
                                   this._closed = value;  
                                   var element = this.get_element();  
                          = "none";  
                                   Telerik.Web.UI.DockCloseCommand.callBaseMethod(this.getCommand("Close"), 'onCommand');  
                               else {  
                                   old_SetClosed(value, playAnimation);  

    Kind regards,
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top