Making Dock Collapse when Header Bar is Clicked

7 posts, 1 answers
  1. Andrew
    Andrew avatar
    104 posts
    Member since:
    May 2008

    Posted 16 Mar 2009 Link to this post

    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.
  2. Answer
    Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 16 Mar 2009 Link to this post

    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> 
     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    104 posts
    Member since:
    May 2008

    Posted 18 Mar 2009 Link to this post

    That works. Thanks.
  5. Andrew
    Andrew avatar
    104 posts
    Member since:
    May 2008

    Posted 31 Mar 2009 Link to this post

    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?
  6. Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 31 Mar 2009 Link to this post

    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.
  7. Gilles Vogelesang
    Gilles Vogelesang avatar
    1 posts
    Member since:
    Oct 2005

    Posted 01 Dec 2009 Link to this post

    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
                } 
            }
  8. Eirik H
    Eirik H avatar
    36 posts
    Member since:
    Mar 2010

    Posted 16 Apr 2010 Link to this post

    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>   



Back to Top
UI for ASP.NET Ajax is Ready for VS 2017