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

Dock horizontal automatic sizing

2 Answers 169 Views

Dock

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

Tom asked on 05 Dec 2012, 04:42 PM

I combined the Dock/Dock Resizing example (http://demos.telerik.com/aspnet-ajax/dock/examples/dockresize/defaultcs.aspx) with the splitters and sliding panes (and styles) from our application. When I open the sliding pane and unpin, I can move the slider bar horizontally. The dock automatically adjusts its width to match. If I resize the dock vertically, then resize the splitter horizontally, the dock width remain fixed. By double-clicking the dock title bar, the dock snaps to the splitter bar width. Is there event handling or attribute that would mimic this behavior(without having to double click the title bar)?

(Note: The RadDockZone MinHeight attribute percentage vs pixel behaves differently in our application than in this example. In some cases the dock will fill the zone and resizing vertically will resize both dock and zone so you can only make the dock smaller but not larger.)

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' style="height: 100%; width: 100%">

<head>

<title>ASP.NET Dock Demo - Dock Resizing</title>

</head>

<body style="height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;">

<form id="form1" runat="server" style="height: 100%; width: 100%">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />

<telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

<div style="height: 100%; width: 100%;">

<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%">

<telerik:RadPane ID="RadPane1" runat="server" Height="100%" Width="20px">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server">

<telerik:RadSlidingPane ID="PrimarySlidePane" runat="server" Height="100%" Width="20%" Title="RadSlidingPane">

<telerik:RadDockLayout ID="RadDockLayout1" runat="server">

<div>

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="400px" MinWidth="50px">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1" Height="50px" Width="50px" Resizable="true"

Text="RadDock is placed in a <strong>vertically</strong> oriented RadDockZone. Grab the bottom handle to resize the dock vertically. Horizontal resizing is not allowed.">

</telerik:RadDock>

</telerik:RadDockZone>

</div>

</telerik:RadDockLayout>

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar runat="server" />

<telerik:RadPane ID="RadPane3" runat="server">

<div id="Viewport" style="height: 100%;">

<br/>

</div>

</telerik:RadPane>

</telerik:RadSplitter>

<telerik:RadDock ID="RadDock2" runat="server" Title="RadDock2" Top="230px" Left="850px"

Width="300px" Resizable="true" Text="Grab the right, the bottom or the left handle to resize the dock, when it is not placed in a docking zone.">

</telerik:RadDock>

<%-- <asp:Button ID="Button1" runat="server" Text="Make postback"></asp:Button>--%>

</div>

</form>

</body>

</html>

2 Answers, 1 is accepted

answered on 10 Dec 2012, 09:12 AM

Hi Tom,

By default, the RadDock is resized to fit the RadDockZone, in which it is docked. When its property Resizable is set to true and you drag the dock's edge to change its size, it is set with fixed width, which results in the examined behavior. To avoid it, you can handle the OnClientResizeEnd event of RadDock and set the width CSS property of the controls' HTML element to auto, so that it no longer has fixed size after resizing.

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="400px" MinWidth="50px" FitDocks="false">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1" Height="50px" Width="50px"

OnClientResizeEnd="OnClientResizeEnd" Resizable="true" Text="RadDock is placed in a <strong>vertically</strong> oriented RadDockZone. Grab the bottom handle to resize the dock vertically. Horizontal resizing is not allowed.">

</telerik:RadDock>

</telerik:RadDockZone>

<script type="text/javascript">

function OnClientResizeEnd(sender, args)

{

if (sender.get_dockZoneID() == "<%=RadDockZone1.ClientID %>")

{

sender.get_element().style.width = "auto";

}

</script>

I hope this helps. Feel free to contact us again if you run into more difficulties.

All the best,
Slav
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.