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

[Solved] ?Bug - Clicking a button inside moved RadDock

4 Answers 151 Views

Dock

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

Anar asked on 30 Jul 2009, 09:26 AM

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; 
        
                } 
        
            }

4 Answers, 1 is accepted

answered on 04 Aug 2009, 10:49 AM

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.

answered on 04 Aug 2009, 12:08 PM

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.

answered on 07 Aug 2009, 11:56 AM

openclose-raddock.zip

closedfunctionality.zip

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.