Richard Clarke
Top achievements
Rank 1
Rank 1
Richard Clarke
asked on 27 Jul 2010, 10:24 AM
Is there a way to have the docking panels dynamically resize when the browser window is resized ( vertically)? i got this done horizontally. but wondering how to do it vertically.
<telerik:RadDockLayout runat="server" ID="RadDockLayout1" OnSaveDockLayout="RadDockLayout1_SaveDockLayout"
OnLoadDockLayout="RadDockLayout1_LoadDockLayout" EnableEmbeddedSkins="false"
Skin="None">
<table style="table-layout: fixed;">
<tr>
<td id="left" style="width: 250px; height: 100%; vertical-align:top;">
<telerik:RadDockZone runat="server" ID="RadDockZoneLeftTop" Width="249px" BorderWidth="0"
Docks="1" Orientation="Vertical" FitDocks="true" HighlightedCssClass="CustomCssClass">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" ID="RadDockZoneLeftBottom" Width="249px" BorderWidth="0"
Docks="1" Orientation="Vertical" FitDocks="true" HighlightedCssClass="CustomCssClass">
</telerik:RadDockZone>
</td>
<td id="centre" style="width: 100%; height: 100%; vertical-align: top;">
</td>
<td id="right" style="width: 250px; height: 100%; vertical-align: top;">
<telerik:RadDockZone runat="server" ID="RadDockZoneRightTop" Width="249px" BorderWidth="0"
Docks="1" Orientation="Vertical" FitDocks="true" HighlightedCssClass="CustomCssClass">
</telerik:RadDockZone>
<telerik:RadDockZone runat="server" ID="RadDockZoneRightBottom" Width="249px" BorderWidth="0"
Docks="1" Orientation="Vertical" FitDocks="true" HighlightedCssClass="CustomCssClass">
</telerik:RadDockZone>
</td>
</tr>
</table>
</telerik:RadDockLayout>
I use this method to generate the Raddocks dynamically in page_init()
private RadDock CreateRadDockFromState(DockState state, int number)
{
RadDock dock = new RadDock();
dock.ID = string.Format("RadDock{0}", number);
dock.ApplyState(state);
dock.Closed = false;
dock.DockHandle = DockHandle.TitleBar;
dock.DockMode = DockMode.Docked;
dock.EnableRoundedCorners = true;
dock.EnableAnimation = true;
dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None;
dock.Width = Unit.Pixel(249);
dock.Height = Unit.Pixel(300);
DockCommand dc = new DockCommand();
dc.AutoPostBack = true;
dc.Name = "ShowWidgets";
dc.Text = "Show Widgets";
dock.Commands.Add(dc);
dock.Command += new DockCommandEventHandler(Show_Widgets);
dock.DockPositionChanged += new DockPositionChangedEventHandler(RadDock_DockPositionChanged);
dock.OnClientDockPositionChanged = "OnClientDockPositionChanged";
dock.OnClientDragStart = "OnClientDragStart";
dock.OnClientInitialize = "DockInit";
dock.Resizable = true;
return dock;
}
2 Answers, 1 is accepted
0
Murali Karlapudi
Top achievements
Rank 2
Rank 2
answered on 28 Jul 2010, 11:42 AM
Hello telerik team ...Is there a way to have the docking panels
dynamically resize when the browser window is resized (both horizontally and vertically)? I got this done horizontally... but how vertically...?
0
Hello Murali,
Please note that the RadDock control is designed for fixed layout and its dimensions should be specified in pixels. However, in your case setting the Height in percentage values will be the easier way to achieve the desired behavior. Pasted below you will find an example that has two docks, one with DockMode="Docked" and the other with DockMode="Floating". Both docks resize their height when the browser window is resized.
Here is the code:
The key points in the code are highlighted in yellow. The <html/>, <body/> and <form/> should have width and height of 100% in order for the dock's height to be adjusted relatively to the height of the browser winwod. All parent elements of the dock should have their height in percent in order for the dock to be resized when the browser window is resized.
Sincerely yours,
Pero
the Telerik team
Please note that the RadDock control is designed for fixed layout and its dimensions should be specified in pixels. However, in your case setting the Height in percentage values will be the easier way to achieve the desired behavior. Pasted below you will find an example that has two docks, one with DockMode="Docked" and the other with DockMode="Floating". Both docks resize their height when the browser window is resized.
Here is the code:
<!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 runat="server"> <title></title> <style type="text/css"> html, body, form { width: 100%; height: 100%; margin: 0; padding: 0; } </style></head><body> <form id="form1" runat="server"> <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableCdn="true"> <CdnSettings TelerikCdn="Enabled" /> </telerik:RadScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <div style="width: 100%; height: 100%;"> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px" Height="95%"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" DockMode="Docked" Height="30%"> <ContentTemplate> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px" DockMode="Floating" Height="30%" Top="30%" Left="600px"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </div> </form></body></html>The key points in the code are highlighted in yellow. The <html/>, <body/> and <form/> should have width and height of 100% in order for the dock's height to be adjusted relatively to the height of the browser winwod. All parent elements of the dock should have their height in percent in order for the dock to be resized when the browser window is resized.
Sincerely yours,
Pero
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items