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:
<%@ 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>