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

Sizing DockZone Client-Side

5 Answers 147 Views

Dock

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

apb asked on 30 Dec 2009, 02:21 AM

Greetings,

I have what should be a simple thing to do -- keep a pair of DockZones the same height. What I have is a table with a TR and two TDs. In each TD is a DockZone.

Whenever a dock is dragged from one dropped into the other zone, I want to set the height of both zones to the height of the tallest + about 30px so that when a user drags a dock from one to the other and drops it, it actually lands in a zone instead of landing below the shorter zone.

If I leave DockMode at default, it lands in the empty space and is not docked. If I set it to Docked, it just snaps bacl to it's original location, both of which annoy the user who thought he was dropping it in a zone.

MinHeight is not helping -- as soon as one zone gets taller than the minhieght same problem. Also, in layouts with more than one row, having crazy tall, completely empty space in the top band(s) makes the bands below useless.

Am I missing something? This seems like a pretty basic need.

I've tried adding an extension method to the client api, which I call from a handler off the Dock.OnClientDragEnd event, but I have no way to grab the accurate heights of the zones. So what happens is if I start off with ten docks stacked in one zone and zero in the other, if I drag 5 over to the second zone, the original largest height is retained and just passed back and forth:

    
            <script type="text/javascript">  
        
                Telerik.Web.UI.RadDockZone.prototype.sync_Height = function(that) {  
        
                    if (that) {  
        
                        var thisDock = $('#' + this.get_id());  
        
                        var thatDock = $('#' + that.get_id());  
        
                        var thisHeight = thisDock.height();  
        
                        var thatHeight = thatDock.height();  
        
                        if (thatHeight > thisHeight) {  
        
                            thisDock.height(thatHeight);  
        
                        }  
        
                        else {  
        
                            thatDock.height(thisHeight);  
        
                        }  
        
                    }  
        
                }   
        
            </script>

-Al

5 Answers, 1 is accepted

answered on 30 Dec 2009, 01:54 PM

Hello Al,

To achieve the desired behavior you should set Height="100%" to both DockZones placed inside the table cells. Please note that you must also set height: 100% to both TDs and to all parent elements up to the one that has fixed height (specified in pixels). This way the DockZones will have the same height and will fill up the space of the table-cells. Pasted below, you will find a sample project that implements this approach.

In case this does not help, will you be able to provide a sample working project that demonstrates the problems you are having and a detailed information of what you are trying to achieve? Once we receive it we will do our best to provide a working solution.

May I recommend to you our RadSplitter control? It might help you achieve the desired scenario.

.aspx

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

.tdClass

{

vertical-align: top;

border: 1px solid red;

height: 100%;

}

</style>

</head>

<body>

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

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

</asp:ScriptManager>

<div style="height: 500px;">

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

<table style="height: 100%; border: 1px solid green; table-layout: fixed;">

<tr>

<td class="tdClass">

<telerik:RadDockZone ID="RadDockZone1" runat="server" Height="100%" Width="300px">

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

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

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

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

<td class="tdClass">

<telerik:RadDockZone ID="RadDockZone2" runat="server" Height="100%" Width="300px">

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

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

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

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</td>

</tr>

</table>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Kind regards,
Pero
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 02 Mar 2010, 03:49 PM

Hello Helena,

You can use the client-side API of the dock and the docking zone to achieve the desired functionality.

The DockZone.dock(objDock, index) places the dock at the specified index in the zone.
Telerik.Web.UI.RadDockZonesGlobalArray gets an array of all docking zones available on the page.
DockZone.get_docks() returns an array of all docks placed within a zone.

Detailed information about the client-side API can be found on our online documentation: http://www.telerik.com/help/aspnet-ajax/dock_client-side_basics.html

For your convenience I have created a sample project that moves the first dock from any zone to its left neighboring zone. Here is the 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>

<script type="text/javascript">

function OnClientCommand(dock, args)

{

var zonesArray = Telerik.Web.UI.RadDockZonesGlobalArray;

var length = zonesArray.length;

for (var i = 0; i < length; i++)

{

if (i + 1 != length)

{

var docksArray = zonesArray[i + 1].get_docks();

var firstDock = docksArray.length > 0 ? docksArray[0] : null;

if (firstDock)

{

zonesArray[i].dock(firstDock, 0);

}

</script>

<style type="text/css">

.RadDockZone

{

float: left;

}

</style>

</head>

<body>

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

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

</asp:ScriptManager>

<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">

<Commands>

<telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

</Commands>

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

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

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

Skin="Hay">

<Commands>

<telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

</Commands>

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

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

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

Skin="Black">

<Commands>

<telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

</Commands>

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

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

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

Skin="Simple">

<Commands>

<telerik:DockCloseCommand OnClientCommand="OnClientCommand" />

</Commands>

<ContentTemplate>

<br />

CONTENT

<br />

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

Kind 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.