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

Need to move Minimize Command to the Left Side

4 Answers 45 Views

Dock

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

4 Answers, 1 is accepted

answered on 30 May 2009, 01:14 PM

Hi Andrei Snitko,

You could achieve such a behavior by changing the rdCollapse, rdExpand and rdTitle css classes, 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> 
        
                <style type="text/css">  
        
                    <%-- Move expand collapse command to right --%> 
        
                .rdCollapse  
        
                {  
        
                    position: relative;  
        
                    left: -200px !important;  
        
                }  
        
                .rdExpand  
        
                {  
        
                    position: relative;  
        
                    left: -200px !important;  
        
                }  
        
                 <%-- Move text to right --%> 
        
                .rdTitle      
        
                {     
        
                    text-indent: 16px;  
        
                }   
        
                </style> 
        
             </head> 
        
            <body>    
        
                <form id="form1" runat="server">     
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>    
        
                <div>    
        
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server">     
        
                  <telerik:RadDockZone runat="server" ID="DockZone" Width="250px">     
        
                    <telerik:RadDock runat="server" ID="RadDock1" Skin="Black"   
        
                    Title="Price" >    
        
                    </telerik:RadDock>    
        
                </telerik:RadDockZone>    
        
                </telerik:RadDockLayout> 
        
                </div>    
        
                </form>    
        
            </body>    
        
            </html>

Kind regards,
Petio Petkov
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.

Accepted

answered on 05 Jun 2009, 02:28 PM

Hello Andrei Snitko,

You can handle OnClientInitialize,OnClientDragStart and OnClientDragEnd events and reposition the command via JavaScript,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 id="Head1" runat="server">     
        
                <title>Untitled Page</title>    
        
                <style type="text/css">     
        
                    <%-- Move expand collapse command to right --%>    
        
                .rdCollapse     
        
                {     
        
                    position: relative;     
        
                }     
        
                .rdExpand     
        
                {     
        
                    position: relative;     
        
                }     
        
                 <%-- Move text to right --%>    
        
                .rdTitle         
        
                {        
        
                    text-indent: 16px;     
        
                }      
        
                </style>    
        
                <script type="text/javascript">  
        
                    function PositionCommand(dock, args) {  
        
                        var bounds = $telerik.getBounds(dock.get_element());  
        
                        var commandElement = dock.getCommand("ExpandCollapse").get_element();  
        
                        commandElement.style.left = -(bounds.width - 47) + "px";  
        
                    }  
        
                </script> 
        
             </head>    
        
            <body>       
        
                <form id="form1" runat="server">        
        
                <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>       
        
                <div>       
        
                <telerik:RadDockLayout ID="RadDockLayout1" runat="server">        
        
                  <telerik:RadDockZone runat="server" ID="DockZone">        
        
                    <telerik:RadDock runat="server" ID="RadDock1" Skin="Black"      
        
                    OnClientInitialize="PositionCommand" 
        
                    OnClientDragStart = "PositionCommand" 
        
                    OnClientDragEnd="PositionCommand" 
        
                    Title="Price" >       
        
                    </telerik:RadDock>       
        
                </telerik:RadDockZone>       
        
                </telerik:RadDockLayout>    
        
                </div>       
        
                </form>       
        
            </body>       
        
            </html>

Let us know if you have any other questions.

All the best,
Petio Petkov
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Need to move Minimize Command to the Left Side

4 Answers, 1 is accepted