Gabriel Castillo
Top achievements
Rank 1
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
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
0
Jim
Top achievements
Rank 1
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
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:
Any sugestions?
Regards
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
0
Jim
Top achievements
Rank 1
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> |
| <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> |