This is a migrated thread and some comments may be shown as answers.
initial position
3 Answers 56 Views
This is a migrated thread and some comments may be shown as answers.
Gabriel Castillo
Top achievements
Rank 1
Gabriel Castillo asked on 02 Jul 2009, 02:51 PM
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

3 Answers, 1 is accepted

Sort by
0
Jim
Top achievements
Rank 1
answered on 06 Jul 2009, 02:17 PM
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.
0
Gabriel Castillo
Top achievements
Rank 1
answered on 09 Jul 2009, 11:50 AM
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
0
Jim
Top achievements
Rank 1
answered on 14 Jul 2009, 09:12 AM
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> 



Tags
Dock
Asked by
Gabriel Castillo
Top achievements
Rank 1
Answers by
Jim
Top achievements
Rank 1
Gabriel Castillo
Top achievements
Rank 1
Share this question
or