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

Making Dock Collapse when Header Bar is Clicked

6 Answers 208 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 16 Mar 2009, 03:05 PM
Right now the dock collapses when you click the minimize button in the upper right hand corner. Is it possible to make a click anywhere on the header bar collapse the dock?

Thank you.

6 Answers, 1 is accepted

Sort by
0
Accepted
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 16 Mar 2009, 05:23 PM
The titlebar's id is dock.ID + "_T".
You should get the titlebar and onclick you should collapse(dock.set_collapsed(true) ) the RadDock. e.g.
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<!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>Untitled Page</title> 
    <script type="text/javascript">  
    function DockInitialize(dock,args)  
    {  
        var titlebarId = dock.get_id()+"_T";  
        var titlebar = $get(titlebarId);  
        titlebar.onclick = function()   
        {  
            dock.set_collapsed(!dock.get_collapsed());  
            return false;  
        }  
          
    }  
    </script> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
    <div> 
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">  
        <telerik:RadDock ID="RadDock1" runat="server" OnClientInitialize="DockInitialize">  
            <ContentTemplate> 
                CONTENT  
            </ContentTemplate> 
        </telerik:RadDock> 
         <telerik:RadDock ID="RadDock2" runat="server" OnClientInitialize="DockInitialize">  
            <ContentTemplate> 
                CONTENT  
            </ContentTemplate> 
        </telerik:RadDock> 
    </telerik:RadDockLayout> 
    </div> 
    </form> 
</body> 
</html> 
 
0
Andrew
Top achievements
Rank 1
answered on 18 Mar 2009, 03:32 PM
That works. Thanks.
0
Andrew
Top achievements
Rank 1
answered on 31 Mar 2009, 01:15 PM
Actually, I'd still like to have the minimize/collapse icon in the upper righthand corner visible. However, if I click it with this code enabled the collapse/expand toggle executes twice resulting in reversion to the initial state. Once, I assume for the bar OnClick and once for the HREF OnClick. Is there anyway to disable the HREF OnClick event?
0
Petio Petkov
Telerik team
answered on 31 Mar 2009, 01:50 PM
Hi Andrew,

I changed the code a bit and it checks if  the "ExpandCollapse" command is clicked or not.

<head id="Head1" runat="server">   
    <title>Untitled Page</title>  
    <script type="text/javascript">   
    //Add a flag which will indicates if the click comes from the ExpandCollapseCommand 
    var ExpandCollapseCommandClicked = false
    function DockInitialize(dock,args)   
    {   
        var titlebarId = dock.get_id()+"_T";   
        var titlebar = $get(titlebarId);   
        titlebar.onclick = function()    
        {   
            if(ExpandCollapseCommandClicked == false) 
            { 
                dock.set_collapsed(!dock.get_collapsed());   
            } 
            else 
            { 
                ExpandCollapseCommandClicked = false
            } 
            return false;   
        }   
    }  
    function dockCommand(dock,args) 
    { 
        var commandName = args.Command.get_name(); 
        if (commandName == "ExpandCollapse") 
        {                
            ExpandCollapseCommandClicked = true
        } 
    }  
    </script>  
</head>  
<body>  
    <form id="form1" runat="server">   
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
    <div>  
    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">   
        <telerik:RadDock ID="RadDock1" runat="server" OnClientInitialize="DockInitialize" OnClientCommand="dockCommand">   
            <ContentTemplate>  
                CONTENT   
            </ContentTemplate>  
        </telerik:RadDock>  
         <telerik:RadDock ID="RadDock2" runat="server" OnClientInitialize="DockInitialize"  OnClientCommand="dockCommand">   
            <ContentTemplate>  
                CONTENT   
            </ContentTemplate>  
        </telerik:RadDock>  
    </telerik:RadDockLayout>  
    </div>  
    </form>  
</body>  
</html>  

Hope it helps.

All the best,
Petio Petkov
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.
0
Gilles Vogelesang
Top achievements
Rank 1
answered on 01 Dec 2009, 11:39 PM
If you want to save the collapse/expand state of the dock, you have to add one line of code (dock.updateClientState();) in the javascript part:

//Add a flag which will indicates if the click comes from the ExpandCollapseCommand 
        var ExpandCollapseCommandClicked = false
        function DockInitialize(dock, args) { 
            var titlebarId = dock.get_id() + "_T"
            var titlebar = $get(titlebarId); 
            titlebar.onclick = function() { 
                if (ExpandCollapseCommandClicked == false) { 
                    dock.set_collapsed(!dock.get_collapsed()); 
                    dock.updateClientState(); 
                } 
                else { 
                    ExpandCollapseCommandClicked = false
                } 
                return false
            } 
        } 
        function dockCommand(dock, args) { 
            var commandName = args.Command.get_name(); 
            if (commandName == "ExpandCollapse") { 
                ExpandCollapseCommandClicked = true
            } 
        }
0
Eirik H
Top achievements
Rank 2
answered on 16 Apr 2010, 12:23 PM
To make this work properly I had to remove the else in titlebar.onclick so that ExpandCollapseCommandClicked was always set to false. Just wanted to mention it here in case anyone else sees this:

<script type="text/javascript">    
            //Add a flag which will indicates if the click comes from the ExpandCollapseCommand  
            var ExpandCollapseCommandClicked = false;  
            function DockInitialize(dock,args)    
            {    
                var titlebarId = dock.get_id()+"_T";    
                var titlebar = $get(titlebarId);    
                titlebar.onclick = function()     
                {    
                    if(ExpandCollapseCommandClicked == false) 
                    { 
                        dock.set_collapsed(!dock.get_collapsed()); 
                        dock.updateClientState(); 
                    } 
                     
                    ExpandCollapseCommandClicked = false;  
 
                    return false;    
                }    
            }   
            function dockCommand(dock,args)  
            {  
                var commandName = args.Command.get_name();  
                if (commandName == "ExpandCollapse")  
                { 
                    ExpandCollapseCommandClicked = true;  
                }  
            }   
</script>   



Tags
Dock
Asked by
Andrew
Top achievements
Rank 1
Answers by
Obi-Wan Kenobi
Top achievements
Rank 1
Andrew
Top achievements
Rank 1
Petio Petkov
Telerik team
Gilles Vogelesang
Top achievements
Rank 1
Eirik H
Top achievements
Rank 2
Share this question
or