Position RadDock without RadDockLayout

3 posts, 0 answers
  1. Henning
    Henning avatar
    6 posts
    Member since:
    Jun 2009

    Posted 21 Aug 2009 Link to this post

    I want to position my RadDocks without using layout or zones.

    The scenario is this:
    I have a web page with a table-like layout (4x4 blocks).
    In each of these blocks goes a web user control.
    Each web user control has a RadDock.

    Since RadDockZone only allows for other Telerik controls inside of it, I can't use it for positioning.

    How do I make the RadDocks stay inside the blocks, and not position itself at the {0,0} position of the web page?
  2. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 25 Aug 2009 Link to this post

    The correct way to achieve such a goal is to add a RadDock to a RadDockZone and add it to the table cell.
    When the RadDock is floating(as in your project)  it will be rendered with position:absolute, left:0, top:0 - which means that all RadDocks will be in the top-left corner.
    In case you want to workaround this behavior you should handle the RadDock.OnClientInitialize event and set RadDock's position to relative,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">  
            td  
            {  
                border: 1px solid red;  
            }  
        </style> 
     
        <script type="text/javascript">  
            function DockInit(dock, args) {  
                var dockdockElement = dock.get_element();  
                dockElement.style.position = "relative";  
            }  
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div> 
            <table> 
                <tr> 
                    <td style="width: 300px; height: 300px">  
                        <telerik:RadDock runat="server" ID="RadDock1" Skin="Black" Title="RadDock1" Text="RadDock1" 
                            OnClientInitialize="DockInit" /> 
                    </td> 
                    <td style="width: 300px; height: 300px">  
                        <telerik:RadDock runat="server" ID="RadDock2" Skin="Black" Title="RadDock2" Text="RadDock2" 
                            OnClientInitialize="DockInit" /> 
                    </td> 
                </tr> 
                <tr> 
                    <td style="width: 300px; height: 300px">  
                        <telerik:RadDock runat="server" ID="RadDock3" Skin="Black" Title="RadDock3" Text="RadDock3" 
                            OnClientInitialize="DockInit" /> 
                    </td> 
                    <td style="width: 300px; height: 300px">  
                        <telerik:RadDock runat="server" ID="RadDock4" Skin="Black" Title="RadDock4" Text="RadDock4" 
                            OnClientInitialize="DockInit" /> 
                    </td> 
                </tr> 
            </table> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    Hope this helps!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Henning
    Henning avatar
    6 posts
    Member since:
    Jun 2009

    Posted 01 Sep 2009 Link to this post

    This is the solution I will most likely use:

    In the WebPage.aspx:
    <%@ Register   
        Assembly="Telerik.Web.UI"   
        Namespace="Telerik.Web.UI"   
        TagPrefix="telerik" %> 
    <%@ Register   
        Src="~/Controls/MyUserControl.ascx"   
        TagName="UserControl"   
        TagPrefix="uc1" %> 
     
        <telerik:RadDockLayout ID="layout1" runat="server">  
            <div> 
                <div> 
                    <uc1:UserControl id="ctl1" runat="server" /> 
                </div>                   
                <div> 
                    <uc1:UserControl id="ctl2" runat="server" /> 
                </div>      
                <div> 
                    <uc1:UserControl id="ctl3" runat="server" /> 
                </div>     
            </div> 
        </telerik:RadDockLayout> 

    In MyUserControl.ascx:
    <%@ Register   
        Assembly="Telerik.Web.UI"   
        Namespace="Telerik.Web.UI"   
        TagPrefix="telerik" %> 
     
        <telerik:RadDockZone ID="RadDockZone1" runat="server">  
            <telerik:RadDock ID="ctlDock1" runat="server">  
            </telerik:RadDock> 
        </telerik:RadDockZone> 
Back to Top