TreePanel:Copying from one node to another node using drag and drop
Hi Coolite Team,
We are working on a application in which we will be using TreePanel which will be created dynamically in code behind. We want to use Drag and Drop feature to copy data from one node to another node and update the changes back to the server . We will appreciate if you can provide a working sample for the same.
Thanks & Regards
Craig,
RE: TreePanel:Copying from one node to another node using drag and drop
Hi Craig,
Can you clarify? What you mean 'copy data' ?
Do you want copy some information (which one?) from one node (drop node) to another (target node)? Or clone drop node and append clone to the target node (append to target node children)?
RE: TreePanel:Copying from one node to another node using drag and drop
Hi ,
Thank you for your reply. It should do two things by providing options like do you want to move or copy
1) Move the dragged node onto the dropped(target) node.
2)Clone the dragged node and append it to dropped(target) node.
but it should have a constraint like the hierarchy needs to be maintained. like example
I have Parent Dept nodes and each dept contains employees. I can only drag employees to another dept. like the same way the tree will be having multiple levels.
Thanks & Regards
Craig
RE: TreePanel:Copying from one node to another node using drag and drop
Hi Craig,
I wrote small sample which shows how to move node and copy (copy if ctrl key pressed)
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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="Head2" runat="server">
<title></title>
<script runat="server">
protected void NodeDrop(object sender, AjaxEventArgs e)
{
string targetID = e.ExtraParams["TargetID"];
string dropedID = e.ExtraParams["DropedID"];
bool isCopy = Convert.ToBoolean(e.ExtraParams["isCopy"]);
string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID, "<br/>IsCopy = ", isCopy);
ScriptManager1.AddScript("Ext.Msg.alert('Response from server', {0});", JSON.Serialize(msg));
}
</script>
<script type="text/javascript">
function beforeDrop(dropEvent) {
//if with ctrl key then copy else move
if (dropEvent.rawEvent.ctrlKey) {
dropEvent.dropNode = new Ext.tree.TreeNode(dropEvent.dropNode.attributes);
}
return true;
}
function dragOver(dragOverEvent) {
// we don't want 'above' or 'below' operations which mean insert
//also you can perform additional checks with dragOverEvent.target and dragOverEvent.dropNode
return dragOverEvent.point == 'append';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
<ext:TreePanel runat="server" Width="300" Height="400" RootVisible="false" EnableDD="true">
<Root>
<ext:TreeNode Text="Root">
<Nodes>
<ext:TreeNode Text="1" NodeID="ID1"></ext:TreeNode>
<ext:TreeNode Text="2" NodeID="ID2"></ext:TreeNode>
<ext:TreeNode Text="3" NodeID="ID3"></ext:TreeNode>
<ext:TreeNode Text="4" NodeID="ID4"></ext:TreeNode>
<ext:TreeNode Text="5" NodeID="ID5"></ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<BeforeNodeDrop Fn="beforeDrop" />
<NodeDragOver Fn="dragOver" />
</Listeners>
<AjaxEvents>
<NodeDrop OnEvent="NodeDrop">
<ExtraParams>
<ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
<ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />
<ext:Parameter Name="isCopy" Value="dropEvent.rawEvent.ctrlKey" Mode="Raw" />
</ExtraParams>
</NodeDrop>
</AjaxEvents>
</ext:TreePanel>
</form>
</body>
</html>
Hope this help
RE: TreePanel:Copying from one node to another node using drag and drop
Hi,
Thank you for your reply. The sample is working for client side .but when it is raising the AJAXEvent it is showing an error 'dropEvent' is undefined. you are sending the dropEvent properties as parameters for AJAXEvent NodeDrop but It is not present.Kindly fix this issue.
And also It would be very helpful If you can make the sample such a way that it meets the following sample conditions.
Just think A company has multiple departments . the company is the root node. each department will be having employees.
Moving : only employees can be moved from one department to another .
Copying: When I copy a department to another department all the employees from the department needs to be copied to the other department and not the department itself. and an employee can be copied to another department. This is just a fictious sample and this is a typical tree functionality .
I will appreciate your support in making this sample work.
Thanks & Regards
Craig
RE: TreePanel:Copying from one node to another node using drag and drop
Hi Graig,
About error... You need update from the SVN or use params[0] instead 'dropEvent' in ExtraParams.
I modified example according your requirments. Now employees can be copy/move to another departments (copy mode with ctrl key). Departments can't be moved but it can be copied (all employees will be copied from one department to another)
Please see the following example:
Code:
<%@ Page Language="C#" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!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="Head2" runat="server">
<title></title>
<script runat="server">
protected void NodeDrop(object sender, AjaxEventArgs e)
{
string targetID = e.ExtraParams["TargetID"];
string dropedID = e.ExtraParams["DropedID"];
bool isCopy = Convert.ToBoolean(e.ExtraParams["isCopy"]);
string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID, "<br/>IsCopy = ", isCopy);
ScriptManager1.AddScript("Ext.Msg.alert('Response from server', {0});", JSON.Serialize(msg));
}
protected void DepartmentCopy(object sender, AjaxEventArgs e)
{
string targetID = e.ExtraParams["TargetID"];
string dropedID = e.ExtraParams["DropedID"];
string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID);
ScriptManager1.AddScript("Ext.Msg.alert('Departments copy', {0});", JSON.Serialize(msg));
}
</script>
<script type="text/javascript">
//this function clone node with children
function clone(node) {
var atts = node.attributes;
atts.id = Ext.id();
var clonedNode = new Ext.tree.TreeNode(Ext.apply({}, atts));
clonedNode.text = node.text;
for (var i = 0; i < node.childNodes.length; i++) {
clonedNode.appendChild(clone(node.childNodes[i]));
}
return clonedNode;
}
function beforeDrop(dropEvent) {
//if with ctrl key then copy else move
if (dropEvent.rawEvent.ctrlKey) {
var isDepartment = dropEvent.dropNode.attributes.IsDepartment;
var isEmployee = dropEvent.dropNode.attributes.IsEmployee;
if (isDepartment) {
//copy employees to the another department
for (var i = 0; i < dropEvent.dropNode.childNodes.length; i++) {
dropEvent.target.appendChild(clone(dropEvent.dropNode.childNodes[i]));
}
dropEvent.cancel = true;
dropEvent.dropStatus = true;
}
else if (isEmployee) {
dropEvent.dropNode = clone(dropEvent.dropNode);
}
else {
dropEvent.cancel = true;
}
}
return true;
}
function isDepartmentCopy(dropEvent) {
var result = dropEvent.rawEvent.ctrlKey && dropEvent.dropNode.attributes.IsDepartment && dropEvent.target.attributes.IsDepartment;
return result || false;
}
function dragOver(dragOverEvent) {
// we don't want 'above' or 'below' operations which mean insert
//also you can perform additional checks with dragOverEvent.target and dragOverEvent.dropNode
if(dragOverEvent.point !== 'append') {
return false;
}
var isEmployee = dragOverEvent.dropNode.attributes.IsEmployee;
var toDepartment = dragOverEvent.target.attributes.IsDepartment;
if (!dragOverEvent.rawEvent.ctrlKey) {
//can move only employee
if (!isEmployee) {
return false;
}
//can move to the department only
if (!toDepartment) {
return false;
}
}
else {
//copy
//can copy only to department
if (isEmployee && !toDepartment) {
return false;
}
var isDepartment = dragOverEvent.dropNode.attributes.IsDepartment;
//department can copy to department only
if (isDepartment && !toDepartment) {
return false;
}
}
return true;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
<ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="400" RootVisible="false" EnableDD="true">
<Root>
<ext:TreeNode Text="Company">
<Nodes>
<ext:TreeNode Text="Department1" NodeID="D1">
<Nodes>
<ext:TreeNode Text="D1-Employee1" NodeID="D1E1">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D1-Employee2" NodeID="D1E2">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D1-Employee3" NodeID="D1E3">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D1-Employee4" NodeID="D1E4">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D1-Employee5" NodeID="D1E5">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
<CustomAttributes>
<ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="Department2" NodeID="D2">
<Nodes>
<ext:TreeNode Text="D2-Employee1" NodeID="D2E1">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D2-Employee2" NodeID="D2E2">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D2-Employee3" NodeID="D2E3">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D2-Employee4" NodeID="D2E4">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D2-Employee5" NodeID="D2E5">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
<CustomAttributes>
<ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="Department3" NodeID="D3">
<Nodes>
<ext:TreeNode Text="D3-Employee1" NodeID="D3E1">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D3-Employee2" NodeID="D3E2">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D3-Employee3" NodeID="D3E3">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D3-Employee4" NodeID="D3E4">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
<ext:TreeNode Text="D3-Employee5" NodeID="D3E5">
<CustomAttributes>
<ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
<CustomAttributes>
<ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
</CustomAttributes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
<Listeners>
<BeforeNodeDrop Fn="beforeDrop" />
<NodeDragOver Fn="dragOver" />
</Listeners>
<AjaxEvents>
<BeforeNodeDrop OnEvent="DepartmentCopy" Before="return isDepartmentCopy(dropEvent);">
<ExtraParams>
<ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
<ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />
</ExtraParams>
</BeforeNodeDrop>
<NodeDrop OnEvent="NodeDrop">
<ExtraParams>
<ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
<ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />
<ext:Parameter Name="isCopy" Value="dropEvent.rawEvent.ctrlKey" Mode="Raw" />
</ExtraParams>
</NodeDrop>
</AjaxEvents>
</ext:TreePanel>
</form>
</body>
</html>
