Question:
1. How can I restrict the number of dock can be mapped to a zone? Apparently I could drag and drop any number of dock to a zone, but I only want to have one.
2. Is it possible to do something like, dragging a literal text over a zone, but when it's dropped or hover onto a zone, it shows an image? My intention is to drag and drop image onto a zone.
1. How can I restrict the number of dock can be mapped to a zone? Apparently I could drag and drop any number of dock to a zone, but I only want to have one.
2. Is it possible to do something like, dragging a literal text over a zone, but when it's dropped or hover onto a zone, it shows an image? My intention is to drag and drop image onto a zone.
2 Answers, 1 is accepted
0
Alec
Top achievements
Rank 1
Rank 1
answered on 09 Jul 2009, 07:32 AM
This is my code:
So, i am building up raddockzone 1 in code behind:
and then i am also binding a list of docks to second zone in code behind:
Pls help!, Thanks!
| <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> |
| <div class="signature"> |
| <asp:Panel ID="pnlPreview" runat="server"></asp:Panel> |
| </div> |
| <div class="preview"> |
| <telerik:RadDockZone ID="radDockZone" runat="server" Orientation="Vertical"></telerik:RadDockZone> |
| </div> |
| </telerik:RadDockLayout> <
script type="text/javascript">
function SetHandleDock(dock, args)
{ dock.set_handle(document.getElementById(dock.get_id())); }
</script>
<
script type="text/javascript">
function checkMaximumDock(dock, args) {
var zone2 = $find(dock.get_DockZoneID());
if (dock.get_DockZoneID() == "zone0") {
var zone1 = $find("RadDockZone1");
if (zone2.get_Docks().length >= 2) {
zone1.dock(dock); alert( "RadDockZone can have only 1 dock!");
} } }
</script>
|
So, i am building up raddockzone 1 in code behind:
| //in a for loop, creating zones dynamically |
| RadDockZone zone = new RadDockZone(); |
| zone.ID = "zone" + counter; |
| pnlPreview.Controls.Add(zone); |
and then i am also binding a list of docks to second zone in code behind:
| RadDock radDock = new RadDock(); |
| radDock.DockMode = DockMode.Docked; |
| radDock.OnClientInitialize = "SetHandleDock"; |
| radDock.DockHandle = DockHandle.None; |
| radDock.ID = "radDock" + lzContent.LayoutZoneContentId; |
| radDock.Title = lzContent.Title; |
| radDock.OnClientDockPositionChanged = "checkMaximumDock"; |
| Literal ltrContent = new Literal(); |
| ltrContent.Text = lzContent.Title; |
| radDock.Controls.Add(ltrContent); |
| radDockZone.Controls.Add(radDock); |
Pls help!, Thanks!
0
Hi Alec,
In reference to your questions:
Greetings,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
In reference to your questions:
- This can be done via JavaScript. When a RadDock is dropped onto a zone (attach an event handler on the OnClientDragEnd client-side event) if the current number of docks is greater than 1 (for example) return the dock to its original zone. I have created a simple project to demonstrate this functionality. 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> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadDockLayout runat="server" ID="RadDockLayout1"> <telerik:RadDockZone ID="RadDockZone1" runat="server" Width="300px" Height="600px" Orientation="Vertical" Style="float: left; margin-right: 15px;"> <telerik:RadDock ID="RadDock1" runat="server" Width="300px" DockMode="Docked" Title="RadDock-Title 1" OnClientDragEnd="OnDockDropped" OnClientDragStart="OnClientStartDrag"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone2" runat="server" Width="300px" Height="600px" Orientation="Vertical" Style="float: left;"> <telerik:RadDock ID="RadDock2" runat="server" Width="300px" DockMode="Docked" Title="RadDock-Title 2" OnClientDragEnd="OnDockDropped" OnClientDragStart="OnClientStartDrag"> <ContentTemplate> <br /> <br /> <br /> <br /> <br /> CONTENT <br /> <br /> <br /> <br /> <br /> </ContentTemplate> </telerik:RadDock> </telerik:RadDockZone> <telerik:RadDockZone ID="RadDockZone3" runat="server" Width="300px" Height="600px" Orientation="Vertical" Style="float: left;"> </telerik:RadDockZone> </telerik:RadDockLayout> <script type="text/javascript"> var originalZone; function OnClientStartDrag(dock, args) { originalZone = $find(dock.get_dockZoneID()); //alert(dock.get_dockZoneID()); } function OnDockDropped(dock, args) { var droppingZone = $find(dock.get_dockZoneID()); if (droppingZone.get_docks().length > 1) { originalZone.dock(dock); } } </script> </form> </body> </html> - RadDockZone could only contain objects of type RadDock. To achieve the functionality you have described below, our suggestion is to add text in the dock's content and set the text as a drag handle. When the dock is dragged and dropped in the zone the text can be changed to an image using an AJAX request.
Greetings,
Pero
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.