4 Answers, 1 is accepted
0
Hello Michael,
The left and right spacing of the dock is left, so you could easily make the dock resizable on the client (they are used as resizing handles). To remove it we need to use custom CSS code, and JavaScript. For your convenience I have implemented a sample project that does this. Here is the full source code:
Let me know if you have questions, or need further clarification.
Greetings,
Pero
the Telerik team
The left and right spacing of the dock is left, so you could easily make the dock resizable on the client (they are used as resizing handles). To remove it we need to use custom CSS code, and JavaScript. For your convenience I have implemented a sample project that does this. Here is the full source code:
<%@ 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> <style type="text/css"> .rdMiddle .rdLeft, .rdMiddle .rdRight, .rdBottom { display: none !important; } .rdContent { border: 1px solid #a7bac5 !important; border-top:none; width: auto !important; } </style> <script type="text/javascript"> function DockInit(dock, args) { var middleTableCell = dock.get_contentContainer().parentNode; middleTableCell.setAttribute("colSpan", 3); } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table id="table" cellspacing="3"> </table> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title" Skin="Vista" EnableRoundedCorners="true" OnClientInitialize="DockInit" Height="300px"> <ContentTemplate> <div style="height: 100px; background: red;"> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Let me know if you have questions, or need further clarification.
Greetings,
Pero
the Telerik team
0
USI
Top achievements
Rank 1
Rank 1
answered on 17 Mar 2011, 03:20 PM
Hi,
Thanks for the fast answer. It works. The problem is that I want to keep the resize functionality.
Is it possible to make only the toolbar fit perfectly in the dock and let the content with the left and right spacing in order to keep the resize funcionality? Or maybe adding a statusbar that could be the resize handler?
Michael Pinheiro
Thanks for the fast answer. It works. The problem is that I want to keep the resize functionality.
Is it possible to make only the toolbar fit perfectly in the dock and let the content with the left and right spacing in order to keep the resize funcionality? Or maybe adding a statusbar that could be the resize handler?
Michael Pinheiro
0
Hello Michael,
I modified my code from the previous post, and it turns out, we can keep the bottom border (i.e. statusbar) of the dock, so it can be resized. Here is the modified code:
Note that, depending on the skin used you might need to change the color of the border (highlighted in yellow). In this example I have used the color for the Vista skin.
Kind regards,
Pero
the Telerik team
I modified my code from the previous post, and it turns out, we can keep the bottom border (i.e. statusbar) of the dock, so it can be resized. Here is the modified code:
<%@ 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> <style type="text/css"> .rdMiddle .rdLeft, .rdMiddle .rdRight { display: none !important; } .rdContent { border: 1px solid #a7bac5 !important; border-top: 0px !important; border-bottom: 0px !important; width: auto !important; } </style> <script type="text/javascript"> function DockInit(dock, args) { var middleTableCell = dock.get_contentContainer().parentNode; middleTableCell.setAttribute("colSpan", 3); } </script></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table id="table" cellspacing="3"> </table> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title" Resizable="true" Skin="Vista" EnableRoundedCorners="true" OnClientInitialize="DockInit" Height="300px"> <ContentTemplate> <div style="height: 100px; background: red;"> </div> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Note that, depending on the skin used you might need to change the color of the border (highlighted in yellow). In this example I have used the color for the Vista skin.
Kind regards,
Pero
the Telerik team
0
USI
Top achievements
Rank 1
Rank 1
answered on 21 Mar 2011, 12:39 PM
Hi,
That's exactly what I was looking for.
Thank you.
Michael Pinheiro
That's exactly what I was looking for.
Thank you.
Michael Pinheiro