This is a migrated thread and some comments may be shown as answers.

initial position

3 Answers 148 Views

Dock

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

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>                                     
        
                  <a 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

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> 
        
                <a 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>