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?
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 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
Rank 1
answered on 25 Aug 2009, 12:34 PM
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.
Hope this helps!
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> |
0
Henning
Top achievements
Rank 1
Rank 1
answered on 01 Sep 2009, 02:37 PM
This is the solution I will most likely use:
In the WebPage.aspx:
In MyUserControl.ascx:
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> |