I have three docks in three zones, and a destination zone. I want to be able to drag docks into the destination zone, only allowing for at most one dock in the destination zone. I've written custom javascript code to do this, but my problem is that when I drag a dock onto the destination zone, before I let go of the mouse, the placeholder already shows up - it effectively pushes around the existing dock in the destination zone. How do I disable the placeholder? This is the code that checks to see if the destination zone contains a dock and if so, prevents another one from being dragged in there (on the dock I have OnClientDrag set to DragDock, this function):
function DragDock(dock) {
// get the hit zone
var hitZone = dock._hitZone;
if (hitZone != null) {
// find out if the hit zone has a dock
if (hitZone.get_docks().length > 0) {
// if so, add the hit zone to the list of forbidden zones of the incoming dock
var forbiddenZones = dock.get_forbiddenZones();
forbiddenZones.push(hitZone._clientID);
}
}
function DragDock(dock) {
// get the hit zone
var hitZone = dock._hitZone;
if (hitZone != null) {
// find out if the hit zone has a dock
if (hitZone.get_docks().length > 0) {
// if so, add the hit zone to the list of forbidden zones of the incoming dock
var forbiddenZones = dock.get_forbiddenZones();
forbiddenZones.push(hitZone._clientID);
}
}
9 Answers, 1 is accepted
0
Hello Gabriel,
I prepared a small sample for you that shows how to achieve the desired behavior. Hope it helps you.
ASPX:
Greetings,
Petko
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
I prepared a small sample for you that shows how to achieve the desired behavior. Hope it helps you.
ASPX:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <script type="text/javascript"> |
| var AllDocks = new Array(); |
| var ForbiddenZones = new Array("DestZone"); |
| var EmptyForbiddenZones = new Array(); |
| var LatestMovedRadDockInDestZone; |
| function ClientInitialize(dock,args) |
| { |
| AllDocks.push(dock); |
| } |
| function DockPositionChanged(dock,args) |
| { |
| var hitZoneID = dock.get_dockZoneID(); |
| if(hitZoneID == "DestZone") |
| { |
| LatestMovedRadDockInDestZone = dock; |
| for(var i=0;i<AllDocks.length;i++) |
| { |
| if(dock != AllDocks[i]) |
| { |
| AllDocks[i].set_forbiddenZones(ForbiddenZones); |
| } |
| } |
| } |
| else |
| { |
| if(LatestMovedRadDockInDestZone == dock) |
| { |
| for(var i=0;i<AllDocks.length;i++) |
| { |
| AllDocks[i].set_forbiddenZones(EmptyForbiddenZones); |
| } |
| } |
| } |
| } |
| </script> |
| </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" Width="200px"> |
| <telerik:RadDock ID="RadDock1" runat="server" |
| OnClientInitialize="ClientInitialize" |
| OnClientDockPositionChanged="DockPositionChanged" |
| ></telerik:RadDock> |
| </telerik:RadDockZone> |
| <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="200px"> |
| <telerik:RadDock ID="RadDock2" runat="server" |
| OnClientInitialize="ClientInitialize" |
| OnClientDockPositionChanged="DockPositionChanged" |
| ></telerik:RadDock> |
| </telerik:RadDockZone> |
| <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="200px"> |
| <telerik:RadDock ID="RadDock3" runat="server" |
| OnClientInitialize="ClientInitialize" |
| OnClientDockPositionChanged="DockPositionChanged" |
| ></telerik:RadDock> |
| </telerik:RadDockZone> |
| Destination Zone |
| <telerik:RadDockZone ID="DestZone" runat="server" Width="200px"></telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| </form> |
| </body> |
Greetings,
Petko
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ulises
Top achievements
Rank 1
Rank 1
answered on 10 Dec 2008, 06:38 PM
Hi. I need to solve the same case, but, with two destination zones and only one RadDock for each destination zone. What logic i need for this problem?
0
Hello Ulises,
When you have more than one destination zone you should ensure that you assign the correct forbidden zones and keep track of removing RadDocks from these zones. When you remove a RadDock from a destination zone you need to update the Forbidden Zones collection of all RadDocks. The same is valid when you add RadDock to a destination zone.
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
When you have more than one destination zone you should ensure that you assign the correct forbidden zones and keep track of removing RadDocks from these zones. When you remove a RadDock from a destination zone you need to update the Forbidden Zones collection of all RadDocks. The same is valid when you add RadDock to a destination zone.
| function DockPositionChanging(dock, args) |
| { |
| if (dock.get_dockZoneID() == "DestZone1" || dock.get_dockZoneID() == "DestZone2") |
| { |
| for (var i = 0; i < AllDocks.length; i++) |
| { |
| RemoveForbiddenZone(AllDocks[i], dock.get_dockZoneID()); |
| } |
| } |
| } |
DockPositionChanging is the event handler function of the OnClientDockPositionChanging event. There the dock's zone from which the dock is being removed is checked whether it is one of the destination zones. If it is all RadDock's forbidden zones collections are updated(the zone is removed from the collection).
| function IsZoneForbidden(zones, zone) |
| { |
| var forbidden = false; |
| for (var i = 0; i < zones.length; i++) |
| { |
| if (zones[i] == zone) |
| { |
| forbidden = true; |
| break; |
| } |
| } |
| return forbidden; |
| } |
| function RemoveForbiddenZone(dock, zone) |
| { |
| var zones = dock.get_forbiddenZones(); |
| for (var i = 0; i < zones.length; i++) |
| { |
| if (zones[i] == zone) |
| { |
| zones.splice(i, 1); |
| break; |
| } |
| } |
| dock.set_forbiddenZones(zones); |
| } |
The IsZoneForbidden helper function is used to check whether a given zone is already added to the forbidden zones collection of a RadDock. RemoveForbiddenZone removes a zone from the forbidden zones collection.
For your convenience I have attached a small sample that shows how to do this.
Greetings,
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Ulises
Top achievements
Rank 1
Rank 1
answered on 16 Dec 2008, 01:37 AM
PERFECT. This solve my problem, with a little changes. You know, the content place holder in the master pages with the "ctl00_". But this example was dynamite. Thanks.
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 24 Jan 2011, 07:25 AM
I have a similar issue to this, but I guess theoretically it is a bit simpler. I have managed to write javascript that limits each zone to just one dock, and also swaps the two docks' zones. As such, it makes sense for there to be no placeholder when the user drags (as this implies that there will be two docks ending up in this zone). If possible I would like the placeholder to "highlight" the existing dock rather than just shove it down and create the blank placeholder. How can I do this?
Thanks in advance,
Ryan.
Thanks in advance,
Ryan.
0
Hi Ryan,
With a little CSS you can achieve the desired behavior. All you need to do is set the HighlightedCssClass property of every RadDockZone, to the desired CSS class and you can apply any styling to the zone and the docks residing there. For example in the code below, I have set zoneClass to the property, and have the background of the zone go green when a dock is hovering over it, and the residing docks have a yellow borders. Here is the code:
Kind regards,
Pero
the Telerik team
With a little CSS you can achieve the desired behavior. All you need to do is set the HighlightedCssClass property of every RadDockZone, to the desired CSS class and you can apply any styling to the zone and the docks residing there. For example in the code below, I have set zoneClass to the property, and have the background of the zone go green when a dock is hovering over it, and the residing docks have a yellow borders. 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"> /*Apply the styles to the zone*/ .zoneClass { background-color: Red !important; } /*Apply the styles to the dock in the zone*/ .zoneClass .RadDock { border: 2px solid Yellow; } /*Hide the placeholder*/ .rdPlaceHolder { display: none !important; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="RadScriptManager1" runat="server"> </asp:ScriptManager> <script type="text/javascript"> //Put your JavaScript code here. </script> <div> <telerik:RadDockLayout ID="RadDockLayout1" runat="server"> <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px" HighlightedCssClass="zoneClass"> <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> </telerik:RadDock> <telerik:RadDock ID="RadDock2" runat="server" Title="RadDock-Title" Width="300px" Height="300px"> </telerik:RadDock> </telerik:RadDockZone> </telerik:RadDockLayout> </div> </form></body></html>Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Sean
Top achievements
Rank 2
Rank 2
answered on 01 Feb 2011, 01:50 AM
Just to be clear -- you actually set the background-color to red not green as indicated above. :)
0
Ryan
Top achievements
Rank 1
Rank 1
answered on 01 Feb 2011, 02:11 AM
OK, thanks for the suggestions, will give it a try.
0
Hello Sean,
True, the CSS code should look like:
Kind regards,
Pero
the Telerik team
True, the CSS code should look like:
<style type="text/css"> /*Apply the styles to the zone*/ .zoneClass { background-color: Green !important; } .........................Kind regards,
Pero
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.