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

RadDock OnClientTitleDoubleClick

10 Answers 130 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Tony Polad
Top achievements
Rank 1
Tony Polad asked on 23 Jul 2008, 11:07 PM
Hi,

Is there any event on client side for OnClientTitleDoubleClick ?

I want to have a dock that behave as follow:
- When user double click on the Title of the Dock, it will Collapsed or Expand depending on its current state.

Thanks.

10 Answers, 1 is accepted

Sort by
0
Sophy
Telerik team
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
Tony Polad
Top achievements
Rank 1
answered on 31 Jul 2008, 01:58 PM

Hi,

I just downloaded the new version of Telerik Q2 2008.

The solution is no longer working IF I have the following in the RadDockZone

FitDocks

="False"

Any idea ?

Thanks.

0
Sophy
Telerik team
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
Tony Polad
Top achievements
Rank 1
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
Sophy
Telerik team
answered on 04 Aug 2008, 03:46 PM
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
Tony Polad
Top achievements
Rank 1
answered on 04 Aug 2008, 10:56 PM
Hi,

I am able to recreate it using your sample by adding several step.
1. Set the "Splitter1" width to 100%
2. Set the "Zone1" Orientation to "Horizontal
3. Add the following between 2 panels

<

telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" />

4. Try it.
PS: You will need RadSplitbar and the Zone1 to be horizontal to reproduce the problem.

How to test.
- Double click on 96% dock twice.
- minimize the splitter, by collapsing the splitt bar.
- You should notice the problem.


0
Sophy
Telerik team
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
Tony Polad
Top achievements
Rank 1
answered on 07 Aug 2008, 05:35 AM
Hi,

It works well in IE, but not in Latest Mozilla firefox.

Could you please help to ensure that the solution works well across browser ?

Thanks.
0
Sophy
Telerik team
answered on 07 Aug 2008, 10:40 AM
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
Tony Polad
Top achievements
Rank 1
answered on 07 Aug 2008, 01:04 PM
Hi,

I just double checked the version of my FireFox. its v.2.0.0.16

My apology for the confusion.

I havent download the latest version ie. ver. 3.

Cheerz.
Tags
Dock
Asked by
Tony Polad
Top achievements
Rank 1
Answers by
Sophy
Telerik team
Tony Polad
Top achievements
Rank 1
Share this question
or