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

Radock resize vertically

2 Answers 159 Views

Dock

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

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

answered on 29 Jul 2010, 02:58 PM

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:

<!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 />

CONTENT

<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