?Bug - Clicking a button inside moved RadDock

5 posts, 0 answers
  1. Anar
    Anar avatar
    5 posts
    Member since:
    Apr 2009

    Posted 30 Jul 2009 Link to this post

    Hello,

    I've the following strange problem:

    On a page there is button, which makes a raddock visible when clicked.
    Inside the raddock there is some text and a button which closes the raddock when clicked
    The controls are ajaxified using Rad Ajax Manager.

    OK Scenario: I click on the "show" button, raddock appears. I click on the "close" button, raddock disappears. Only asynchronyous postbacks take place. If i click "show" button once more, raddock reappears correctly.

    Fail Scenario: I click on the "show" button, raddock appears. I move raddock on the screen. After that, when I click the 'close" button, full page postback occurs before radddock disappears. If after that, I click "show" button once more, raddock reappears without  title bar and all formatting seems to be lost.

    Aspx file:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %> 
     
    <!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></title
         
         
    </head> 
    <body> 
        <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
            <Scripts> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
            </Scripts> 
        </telerik:RadScriptManager> 
            &nbsp; 
        <div> 
            &nbsp;<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
                <AjaxSettings> 
                    <telerik:AjaxSetting AjaxControlID="rdTest"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="btnShowDock" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                    <telerik:AjaxSetting AjaxControlID="btnShowDock"
                        <UpdatedControls> 
                            <telerik:AjaxUpdatedControl ControlID="rdTest" /> 
                        </UpdatedControls> 
                    </telerik:AjaxSetting> 
                </AjaxSettings> 
        </telerik:RadAjaxManager> 
            <telerik:RadDock ID="rdTest" runat="server" Visible="False" Width="300px"
            <ContentTemplate> 
                Test<br /> 
                <asp:Button ID="btnCloseDock" runat="server" OnClick="btnCloseDock_Click" Text="Close" /> 
                </ContentTemplate></telerik:RadDock> 
     
        </div> 
            <asp:Button ID="btnShowDock" runat="server" OnClick="btnShowDock_Click" Text="Show" /> 
        </form> 
    </body> 
    </html> 
     

    CS file:

    using System; 
    using System.Web; 
    using System.Web.UI; 
    using System.Web.UI.WebControls; 
     
    using System.Data; 
    using System.Configuration; 
    using System.Web.Security; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Web.UI.HtmlControls; 
    using Telerik.Web.UI; 
     
    public partial class Default : System.Web.UI.Page  
        protected void Page_Load(object sender, EventArgs e) 
        { 
     
        } 
     
     
        protected void btnShowDock_Click(object sender, EventArgs e) 
        { 
            rdTest.Visible = true
            btnShowDock.Enabled = false
        } 
     
        protected void btnCloseDock_Click(object sender, EventArgs e) 
        { 
            rdTest.Visible = false
            btnShowDock.Enabled = true
        } 
     


  2. Anar
    Anar avatar
    5 posts
    Member since:
    Apr 2009

    Posted 04 Aug 2009 Link to this post

    Please, does anyone have ideas on how to work around this bug?
    It is really annoying.
  3. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 04 Aug 2009 Link to this post

    Hi Anar,

    Regarding your problems:

    • If you need to ajaxify a floating RadDock, our suggestion is to ajaxify its content (for example all of the dock's content should be surrounded by an RadAjaxPanel, or UpdatePanel), and not the whole dock. In case the dock is docked to a RadDockZone, the zone is the one to ajaxify (the docks inside will be automatically axajified).
    • I examined your source code and noticed that you have set the RadDock to cause an Ajax post-back (<telerik:AjaxSetting ControlID="rdTest" />). For the postback to occur the dock's AutoPostBack property should be set to true.
    • Instead of using the Visible property of the RadDock, use the Closed property instead. It indicates whether the dock is closed or not.
    • Finally, to achieve your functionality, in general my suggestion is to open or close the RadDock on the client by using the dock.set_closed(true/false) method. I modified your project to show how it can be done. Here is the full source code:
      .aspx
      <%@ 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 id="Head1" runat="server"
          <title></title
       
          <script type="text/javascript"
              function CloseDock() 
              { 
                  var dock = $find("rdTest"); 
                  dock.set_closed(true); 
              } 
              function OpenDock() 
              { 
                  var dock = $find("rdTest"); 
                  dock.set_closed(false); 
              } 
          </script> 
       
      </head> 
      <body> 
          <form id="form1" runat="server"
          <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
              <Scripts> 
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
                  <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
              </Scripts> 
          </telerik:RadScriptManager> 
          <asp:Label ID="Label2" runat="server" Text="TextNotChanged"></asp:Label> 
          <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
              <AjaxSettings> 
                  <telerik:AjaxSetting AjaxControlID="btnShowDock" EventName="Click"
                      <UpdatedControls> 
                          <telerik:AjaxUpdatedControl ControlID="Panel1" /> 
                          <telerik:AjaxUpdatedControl ControlID="Label2" /> 
                      </UpdatedControls> 
                  </telerik:AjaxSetting> 
              </AjaxSettings> 
          </telerik:RadAjaxManager> 
          <div> 
              <telerik:RadDock ID="rdTest" runat="server" Closed="true" Width="300px"
                  <ContentTemplate> 
                      <asp:Panel ID="Panel1" runat="server"
                          Test<br /> 
                          <asp:Button ID="btnCloseDock" runat="server" OnClick="btnCloseDock_Click" Text="Close" 
                              OnClientClick="CloseDock()" /> 
                          <asp:Label ID="Label1" runat="server" Text="Label Text"></asp:Label> 
                      </asp:Panel> 
                  </ContentTemplate> 
              </telerik:RadDock> 
          </div> 
          <asp:Button ID="btnShowDock" runat="server" OnClick="btnShowDock_Click" Text="Show" 
              OnClientClick="OpenDock()" /> 
          </form> 
      </body> 
      </html> 
      .cs
      using System; 
      using System.Web; 
      using System.Web.UI; 
      using System.Web.UI.WebControls; 
      using System.Data; 
      using System.Configuration; 
      using System.Web.Security; 
      using System.Web.UI.WebControls.WebParts; 
      using System.Web.UI.HtmlControls; 
      using Telerik.Web.UI; 
       
      public partial class _Default : System.Web.UI.Page 
          protected void Page_Load(object sender, EventArgs e) 
          { 
       
          } 
       
          protected void btnShowDock_Click(object sender, EventArgs e) 
          { 
              Label1.Text = DateTime.Now.ToString(); 
              Label2.Text = Label1.Text; 
          } 
       
          protected void btnCloseDock_Click(object sender, EventArgs e) 
          { 
              Label label = new Label(); 
       
              label.Text = "New Label Text"
       
              Panel1.Controls.Add(label); 
       
          } 


    All the best,
    Pero
    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.
  4. Anar
    Anar avatar
    5 posts
    Member since:
    Apr 2009

    Posted 04 Aug 2009 Link to this post

    Hi Pero,

    I've tried your code.

    1st suggestion leads to the same behavior

    2nd suggestion - manipulating "Closed" property server-side instead of "Visible" does not make the Dock appear on btnShow click so I was not able to explore further.

    3rd  does not trigger server-side action, actually button_click server event is not firing. I see in your code that you are adding some controls to Panel1 but they are not appearing.

    Actually, my goal is straightforward -  I need to
    0) After an ajaxified button is pressed, do some server-side actions and open the dock
    1) Close the dock by pressing a button inside it
    2) Do some server-side actions
    3) Update page controls via ajax according to the changes made at server-side.

    Code I posted at the thread start seems to be working with one exclusion - when the dock is moved, closing it triggers full postback instead of asynchronious one and dock styling is ruined afterwards.

  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 07 Aug 2009 Link to this post

    Hi Anar,

    The first two suggestions were intended to show what is the right way to ajaxify a floating dock and how should a RadDock be made Visible/Invisible by setting the Closed property (I have attached an example that shows how the Closed property works).

    To achieve the functionality you have described in your last reply, again, I would suggest to open/close the dock on the client, and not on the server. Because if it is done on the server you would not be able to fully ajaxify a floating RadDock (unless the dock's position is always fixed). I have modified the project I sent you the last time just to show you that the Button_Click server-side event is fired (because both of the buttons are ajaxified only the controls that are affected by the Ajax are updated). So when either one of the Buttons is clicked (Open or Close) a Label's Text property is updated (on the server) to show which button was pressed. The project is attached to the thread.
      


    Regards,
    Pero
    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