initial position

4 posts, 0 answers
  1. Gabriel Castillo
    Gabriel Castillo avatar
    9 posts
    Member since:
    Jul 2009

    Posted 02 Jul 2009 Link to this post

    Hi:

    I am trying to place a raddock in a specific area of a web page (I don't want to use top and left properties of the raddock), when I look at the source code of the web page it always create the following style: 'position:absolute,top:0,left:0' , how I can either remove the absolute position or set it to relative and also remove the top and left properties, because I need to place the dock below an anchor control.

    Also I have a radeditor inside a raddock, I would like to resize the dock control while resizing the editor or the otherway round.

    Thanks
  2. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 06 Jul 2009 Link to this post

    The RadDock has position:absolute when its DockMode is floating. However when it is docked to a zone its position is relative to the zone. You can place the dock in a zone and put the zone wherever you want on the page.

    The dock has two client methods set_width(width) and set_height(height) that can be used to set the width and height when the Editor is resized.
  3. Gabriel Castillo
    Gabriel Castillo avatar
    9 posts
    Member since:
    Jul 2009

    Posted 09 Jul 2009 Link to this post

    Hi Jim:
    Thanks for the reply, I tried to place a raddockzone but the thing is it pulls down the rest of the page, what I want to do is: I have a TabStrip on the top of that there is an Anchor control <a href='#' ... when the users clicks on the link a raddock shoud appear as a pop up for the user to write some comments

    this is how my code looks like:
     
    <div>                                     
          <id="lnkComments" runat="server" href="#" class="lnk">comments</a>                                            
          <telerik:RadDockLayout ID="RadDockLayout1" runat="server" Skin="Outlook"  >                                                                                                                                                                                                                                                                                                                                
                <telerik:RadDock ID="RadDock1" runat="server" Closed="true" Height="333" Width="450" > 
                        <ContentTemplate>                                                         
                               <telerik:RadEditor ID="RadEditor1" runat="server"  Width="99%" Height="300" />                                                                 
                               <asp:TextBox runat="server" ID="txtTest1" style="display:none;visibility:visible;" />                                                         
                        </ContentTemplate> 
                        <TitlebarTemplate> 
                                  <span>Comments</span> 
                        </TitlebarTemplate> 
                </telerik:RadDock>                                         
          </telerik:RadDockLayout>                                                                         
    </div>                                 
    <telerik:RadTabStrip ID="tabMenu" runat="server" SelectedIndex="0" MultiPageID="pagMenu" Skin="Office2007" Width="780px" > 
                                                <Tabs> 
                                                    <telerik:RadTab Text="Details" PageViewID="page1"></telerik:RadTab> 
                                                    <telerik:RadTab Text="Example" PageViewID="page2" Visible="false" ></telerik:RadTab> 
                                                    ... 
                                                </Tabs> 
    </telerik:RadTabStrip>                                 
    <telerik:RadMultiPage ID="pagMenu" runat="server" SelectedIndex="0" Width="780px"
                                                <telerik:RadPageView ID="page1" runat="server" Width="780px">                                         
                                                    ... 
                                                </telerik:RadPageView> 
                                                <telerik:RadPageView ID="page2" runat="server" Width="780px">                                         
                                                    ... 
                                                </telerik:RadPageView>                                            
    </telerik:RadMultiPage>            

    Any sugestions?
    Regards
  4. Jim
    Jim avatar
    31 posts
    Member since:
    Jun 2009

    Posted 14 Jul 2009 Link to this post

    Try the code pasted below. It appends the dock's HTML element to a div and displays it when the anchor link is clicked. This makes the dock's position relative to the parent element.

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!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></title
    </head> 
    <body> 
        <form id="form1" runat="server"
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
     
        <script type="text/javascript"
            var currentDock; 
            function OnClientInitialize(dock, args) 
            { 
                currentDock = dock
            } 
            function ShowRadDock() 
            { 
                currentDock.set_closed(false); 
                currentDock.repaint();
                //get dock's element 
                var dockElement = currentDock.get_element();

                //get new parent elment 
                var parentElement = $get("myDiv");

                //Change RadDock's parent 
                parentElement.appendChild(dockElement);
                //make its position relative 
                dockElement.style.position = "relative"
            } 
        </script> 
     
        <id="lnkComments" runat="server" href="#" class="lnk" onclick="ShowRadDock()">comments</a> 
        <div> 
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server"
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title" 
                        Closed="true" OnClientInitialize="OnClientInitialize"
                        <ContentTemplate> 
                            <telerik:RadEditor ID="RadEditor1" runat="server"
                            </telerik:RadEditor> 
                        </ContentTemplate> 
                    </telerik:RadDock> 
               <div style="width:300px;height:300px;background-color:Red"></div>      
               <div id="myDiv" style="width:300px;height:300px;background-color:green"></div>      
               <div style="width:300px;height:300px;background-color:blue"></div>      
            </telerik:RadDockLayout> 
        </div> 
        </form> 
    </body> 
    </html> 



Back to Top