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
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
</
ContentTemplate
>
</
telerik:RadDock
>
<
telerik:RadDock
ID
=
"RadDock3"
runat
=
"server"
Width
=
"300px"
Title
=
"RadDock-Title"
>
<
ContentTemplate
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
</
ContentTemplate
>
</
telerik:RadDock
>
<
telerik:RadDock
ID
=
"RadDock6"
runat
=
"server"
Width
=
"300px"
Title
=
"RadDock-Title"
>
<
ContentTemplate
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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.
I am a new baby for RadControl . I try to add several user controls to Dock dynamically. How can I define fixed RadDocks per line inside one RadZone? (repeat column number) Example: I only want to add 4 Docks per line in one RadZone. Since the width is dynamic, I can't resolve it by using Dock width and RadZone witdth. I could use 4 RadDockZone but I am not sure if it has a better solution.
Thanks
Helena
Unfortunately the only way to achieve this is to use 4 RadDockZones. You can disable the borders and remove the padding on some of the zones to make them appear as one zone.
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.
Example: I have two RadDockZones(RadDockZone1 and RadDockZone2) and each RadDockZone has one Dock ( Dock 1 is inside the RadDockZone1 and Dock 2 is inside the RadDockZone2). RadDockZone1 is on the left side and RadDockZone 2 is on the right side. if I removed/close Dock1 from RadDockZone1. Now RadDockZone1 is empty.How can I make sure Dock2 automatically on RadDockZone2 move to RadDockZone1?
Thanks
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
CONTENT
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
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.