This is a migrated thread and some comments may be shown as answers.
Need to move Minimize Command to the Left Side
4 Answers 19 Views
This is a migrated thread and some comments may be shown as answers.
virt
Top achievements
Rank 1
virt asked on 29 May 2009, 07:37 PM
Hello,

I need to have "Minimize" command to be displayed on the left side of the Dock. Other commands should be displayed as they are right now - on the right side. What would be the best approach to solve this?

Thank you,
Andrei

4 Answers, 1 is accepted

Sort by
0
Petio Petkov
Telerik team
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.
0
virt
Top achievements
Rank 1
answered on 04 Jun 2009, 09:21 PM
Petio,

Thank you very much. This does work but only for the docks of the known width. What if dock is of a "fluid" width, as one in my project?

Thank you,
Andrei
0
Accepted
Petio Petkov
Telerik team
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.
0
virt
Top achievements
Rank 1
answered on 05 Jun 2009, 02:37 PM
Petio,

Thank you very much. Works like a charm!

a.
Tags
Dock
Asked by
virt
Top achievements
Rank 1
Answers by
Petio Petkov
Telerik team
virt
Top achievements
Rank 1
Share this question
or