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

How to Change RadDockZone Width and height during Runtime in javascript

1 Answer 139 Views

Dock

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

1 Answer, 1 is accepted

answered on 29 Apr 2010, 11:15 AM

Hello Dinesh,

There is no built-in client-side functionality that will resize the DockZone. This can be done on the server only.

Here is a work around that will exchange the width and height of two DockingZones, but please note that, these changes will not be persisted after a postback:

<%@ 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>

<telerik:RadScriptBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function ChangeWidth()

{

var dockZone = $telerik.findDockZone("<%=RadDockZone1.ClientID %>");

dockZone.get_element().style.height = 600;

//form1.style.height = 600;

}

var originalZoneID = "";

var originalIndex = "";

function OnClientDragStart(dock, args)

{

originalZoneID = dock.get_dockZoneID();

originalIndex = dock.get_index();

}

function OnClientDockPositionChanged(dock, args)

{

var currentZone = dock.get_dockZone();

var currentIndex = dock.get_index();

var docks = currentZone.get_docks();

if (currentZone.get_id() != originalZoneID)

{

var originalZoneElement = $find(originalZoneID).get_element();

var currentZoneElement = currentZone.get_element();

var originalZone_MinHeight = originalZoneElement.style.minHeight;

var originalZone_Height = originalZoneElement.style.height;

var originalZone_Width = originalZoneElement.style.width;

originalZoneElement.style.minHeight = currentZoneElement.style.minHeight;

originalZoneElement.style.height = currentZoneElement.style.height;

originalZoneElement.style.width = currentZoneElement.style.width;

currentZoneElement.style.minHeight = originalZone_MinHeight;

currentZoneElement.style.height = originalZone_Height;

currentZoneElement.style.width = originalZone_Width;

}

</script>

</telerik:RadScriptBlock>

<style type="text/css">

.RadDockZone

{

float: left;

margin-right: 10px;

}

.rdTitleBar EM

{

width: 100% !important;

}

.rdCommands

{

position: absolute !important;

right: 7px !important;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

</Scripts>

</asp:ScriptManager>

<div>

<asp:Button ID="Button1" runat="server" Text="Postback" />

<input type="button" value="Set Width" onclick="ChangeWidth(); return false;" />

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

<telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">

<telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"

Skin="Hay" DockMode="Docked" OnClientDragStart="OnClientDragStart" OnClientDockPositionChanged="OnClientDockPositionChanged">

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

<telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="200px" Width="600px">

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

This can be easily done in the code behind by handling the DockPositionaChanged event and setting the AutoPostBack property to true. The original zone ID should be retrieved at Page.Init using the dock.DockZoneID property, before the new zone ID is applied.

Regards,
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

How to Change RadDockZone Width and height during Runtime in javascript

1 Answer, 1 is accepted