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

RadDock OnClientTitleDoubleClick

10 Answers 123 Views

Dock

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

10 Answers, 1 is accepted

0

answered on 24 Jul 2008, 03:19 PM

Hello Susanto,

RadDock does not provide a client-side event OnClientTitleDoubleClick. However, the desired behavior could be achieved with some custom javascript code.
Please, find below a sample code snippet which demonstrates how to achieve the described behavior:

    
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
                <title>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:scriptmanager id="ScriptManager1" runat="server">  
        
                    </asp:scriptmanager> 
        
                    <telerik:RadDock ID="RadDock1" runat="server" text="Test" onclientinitialize="OnClientInitialize">       
        
                    </telerik:RadDock>    
        
                    <script type="text/javascript">                 
        
                    function OnClientInitialize(sender, args)     
        
                    {     
        
                        $addHandlers(sender._handle, {"dblclick": myHandler}, sender);     
        
                    }     
        
                    function myHandler()     
        
                    {     
        
                        var isCollapsed = !this.get_collapsed();      
        
                        this.set_collapsed(isCollapsed);      
        
                        this.updateClientState();     
        
                    }     
        
                    </script>    
        
                </form> 
        
            </body> 
        
            </html>

Let us know if you need further assistance.

Best regards,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

0

0

answered on 01 Aug 2008, 12:58 PM

Hi Susanto,

The behavior you observe can be reproduced with some of the previous versions of the RadDock control as well. It is due to the fact that the titlebar is used for a drag handle and therefore some other code is executed to provide the needed functionality. In this code the height of the dock is recalculated and this leads to the problem. In order to use the titlebar for expanding/collapsing the dock I suggest you simply set the height of the dock html element to auto just before calling the set_collapsed() method in the dblclick handler, e.g.:

    
            <telerik:raddockzone id="zone1" runat="server" fitdocks="false">  
        
                 <telerik:RadDock ID="RadDock1" runat="server" text="Test" resizable="true" onclientinitialize="OnClientInitialize" aenabledrag="false">          
        
                </telerik:RadDock>    
        
            </telerik:raddockzone>     
        
            <script type="text/javascript">                    
        
            function OnClientInitialize(sender, args)        
        
            {       
        
                $addHandlers(sender._handle, {"dblclick": myHandler}, sender);        
        
            }        
        
            function myHandler()        
        
            {      
        
                this.get_element().style.height = "auto";  
        
                this.set_collapsed(!this.get_collapsed());   
        
                this.updateClientState();    
        
            }   
        
            </script>

Let us know if you experience any other problems.

All the best,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

0

answered on 02 Aug 2008, 01:12 PM

Hi,

Thanks for the solution, it solve the height problem but does not solve the width problem when the raddock in the splitter

Here is my scenario.
A page contains:
a splitter (left and right).
4 docks inside right panel of the splitter.
- First and second dock size are 96%
- Third dock and Fourth dock size are 48%.

When the form is loaded, it loaded perfectly without any problem, then you do double click on the title to expand and collapse. At this point is still "looks" fine.
BUT
when you minimize/close the left panel of the splitter, you will notice that the "double clicked dock" previously, will have different size.

Is there a work around it ?

Thanks.

0

answered on 04 Aug 2008, 03:46 PM

ExpandCollapseTitlebar.zip

Hello Susanto,

I prepared a sample page based on your description, however, I was not able to reproduce the issue you mention. Please, find my test page attached and let me know what is different in your case. Please, open a support ticket and send me a sample page which demonstrates your scenario and reproduces the problem you experience so that I can take a closer look at your code and research what causes the issue. I will be glad to help you.

All the best,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

0

0

answered on 05 Aug 2008, 08:18 AM

Hello Susanto,

Thank you for clarifying the issue. I was able to reproduce the problem you mention following your description.
The reason for this issue is the same as that one which caused the height problem - the width of the dock is recalculated when the titlebar is clicked as the titlebar is also used for a drag handle and some other code is executed to provide the needed functionality. To resolve this problem you can modify the javascript code from the provided test page in the following way:

    
            <script type="text/javascript">                 
        
            function OnClientInitialize(sender, args)     
        
            {     
        
                sender.old_width = sender.get_element().style.width;  
        
                $addHandlers(sender._handle, {"dblclick": myHandler}, sender);     
        
            }     
        
            function myHandler()     
        
            {     
        
                this.get_element().style.height = "auto";    
        
                this.get_element().style.width = this.old_width;   
        
                this.set_collapsed(!this.get_collapsed());      
        
                this.updateClientState();      
        
            }     
        
            </script>

Let us know if you have any other questions.

Best wishes,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

0

0

answered on 07 Aug 2008, 10:40 AM

ExpandCollapseTitlebar.zip

demo.zip

Hi Susanto,

I tested the sample page I had sent you with modified configuration in the way you had described and replaced javasript with the one I suggested you in my previous reply and I was not able to reproduce the issue you mention in Firefox v.3.0.1. What version of Firefox do you use? For your convenience I have attached a video demonstrating my testing process and the sample page with which I test. Please, run the enclosed sample page on your side and let me know whether you reproduce the issue in Firefox with it.

Sincerely yours,
Sophy
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

0

Accepted

Tags

Dock

Asked by

Answers by