Need to move Minimize Command to the Left Side

5 posts, 1 answers
  1. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 29 May 2009 Link to this post

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

    Posted 30 May 2009 Link to this post

    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.
  3. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 04 Jun 2009 Link to this post

    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
  4. Answer
    Petio Petkov
    Admin
    Petio Petkov avatar
    825 posts

    Posted 05 Jun 2009 Link to this post

    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.
  5. virt
    virt avatar
    27 posts
    Member since:
    Sep 2008

    Posted 05 Jun 2009 Link to this post

    Petio,

    Thank you very much. Works like a charm!

    a.
Back to Top