I am looking for a way to clone, or dynamically create a doc item when I drag a control onto a doc zone. I saw an example somewhere of this being used with rad controls, but I can't figure a way to do this. As an example, I want to be able to drag something from a toolbox and have a raddoc be created where I drop it.
Is there any way to achieve this?
Thank you
Is there any way to achieve this?
Thank you
5 Answers, 1 is accepted
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 03 Apr 2008, 12:41 PM
You should create dynamically RadDock via Ajax(It cannot be cloned on the client), after that you should handle the RadDock.OnClientInitialize event an move the RadDock via javascript.
0
Dan
Top achievements
Rank 1
answered on 07 Apr 2008, 12:41 PM
I was trying to find a way to Drag an item off a tree view control onto a radzone and have a dock be created. I know that I'll have to do that on the server side, but I would like to have the dock area be highlighted like I was dragging a dock already. Is there an example of this, or can I get some direction on how this would be accomplished.
Thank you again,
Dan
Thank you again,
Dan
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 07 Apr 2008, 03:07 PM
I created for you an example, which illustrates how to highlight a RadDockZone when you hover it. If you drop the RadTreeNode in the zone it will postback to the server and a RadDock will be added.
ASPX:
Codebehind:
ASPX:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragDrop.aspx.cs" Inherits="TreeView_DragDrop" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %> |
<!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> |
<title>Untitled Page</title> |
<style type="text/css"> |
.HighlightedZoneClass |
{ |
background-color:Green !important; |
} |
</style> |
<script type="text/javascript"> |
var dockZoneId= '<%= RadDockZone1.ClientID %>'; |
function isMouseOverZone(target) |
{ |
parentNode = target; |
while (parentNode != null) |
{ |
if (parentNode.id == dockZoneId) |
{ |
return parentNode; |
} |
parentNodeparentNode = parentNode.parentNode; |
} |
return null; |
} |
function onNodeDragging(sender, args) |
{ |
var target = args.get_htmlElement(); |
if(!target) return; |
var zone = isMouseOverZone(target) |
if (zone) |
{ |
$find(dockZoneId).addCssClass("HighlightedZoneClass"); |
} |
else |
{ |
$find(dockZoneId).removeCssClass("HighlightedZoneClass"); |
} |
} |
</script> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> |
<div> |
<rad:RadTreeView ID="tree1" runat="server" EnableDragAndDrop="true" |
OnClientNodeDragging="onNodeDragging" |
OnNodeDrop = "tree1_HandleDrop" |
> |
<Nodes> |
<rad:RadTreeNode Text="1"></rad:RadTreeNode> |
<rad:RadTreeNode Text="1"></rad:RadTreeNode> |
<rad:RadTreeNode Text="1"></rad:RadTreeNode> |
<rad:RadTreeNode Text="1"></rad:RadTreeNode> |
<rad:RadTreeNode Text="1"></rad:RadTreeNode> |
</Nodes> |
</rad:RadTreeView> |
<rad:RadDockLayout ID="RadDockLayout1" runat="server"> |
<rad:RadDockZone ID="RadDockZone1" runat="server" Height="400px" Width="400px"> |
<rad:RadDock ID="RadDock1" runat="server" Title="RadDock1" Height="200px"> |
</rad:RadDock> |
</rad:RadDockZone> |
</rad:RadDockLayout> |
</div> |
</form> |
</body> |
</html> |
Codebehind:
using System; |
using System.Data; |
using System.Configuration; |
using System.Collections; |
using System.Web; |
using System.Web.Security; |
using System.Web.UI; |
using System.Web.UI.WebControls; |
using System.Web.UI.WebControls.WebParts; |
using System.Web.UI.HtmlControls; |
using Telerik.Web.UI; |
public partial class TreeView_DragDrop : System.Web.UI.Page |
{ |
protected void Page_Load(object sender, EventArgs e) |
{ |
} |
protected void tree1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e) |
{ |
if (e.HtmlElementID == RadDockZone1.ClientID) |
{ |
RadDock rdo = new RadDock(); |
rdo.Text = rdo.ID = System.DateTime.Now.ToString(); |
RadDockZone1.Controls.Add(rdo); |
} |
} |
} |
0
Denny
Top achievements
Rank 2
answered on 06 Jun 2008, 01:30 PM
Hi Obi-Wan Kenobi i have just load up the example you have provided, it seems that the loop is go on infinite when i try to drag a tree node and hence crashed my IE or Firefox. Do i miss something here?
Denny
Denny
0
Obi-Wan Kenobi
Top achievements
Rank 1
answered on 09 Jun 2008, 08:37 AM
It seems that the code is messed up when I paste it.
All you need to do is to change
parentNodeparentNode = parentNode.parentNode;
to
parentNode = parentNode.parentNode;
and everything should be ok.
All you need to do is to change
parentNodeparentNode = parentNode.parentNode;
to
parentNode = parentNode.parentNode;
and everything should be ok.