I need to accomplish the following with drag and drop for Tree using 0.4 version of DOJO Tree.
A) Limit the drag and drop of nodes only within the same parent/level.
B) The parent node (along with its children) can be moved up and down, as long as it is in the same level. I will choose a node and will click on a Up/Down button for moving up/down.
C) I need to remove the parent (along with all children) by clicking on a Delete button.
I am not a Javascript expert and new to DOJO.
I have created tree programmatically that does DND through all levels. I will appreciate any help with 2 questions:
1) How can I limit the move within the same level only.
2) How can I remove/delete a node along with all children?
3) I also want to add a radio button beside each and every node of the tree which will have the key value for each node. But as I am creating the tree dynamically using DOBO script, how can I modify the script below to place a radio button beside each and every tree node?
Any help will be appreciated.
Following is the sample code:
<html>
<head>
<script type="text/javascript">
var djConfig = { isDebug: false };
</script>
<script type="text/javascript" src="scripts/dojo.js">
/* Load Dojo engine */
</script>
<script type="text/javascript">
dojo.require("dojo.lang.common");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
dojo.require("dojo.widget.TreeSelector");
</script>
<script type="text/javascript">
var TreeBuilder = {
buildTree:function (objectId){
var myTreeWidget = dojo.widget.createWidget("Tree",{
widgetId:"myTreeWidget",
DNDMode:"onto",
menu:"treeContextMenu",
objectId
bjectId.value,
expandIconSrcPlus:"/TreeWeb/images/closed.gif",
expandIconSrcMinus:"/TreeWeb/images/open.gif",
toggler:"fade",
DNDAcceptTypes:["myTreeWidget"]
});
for (var i=0; i<3; i++) {
var node = dojo.widget.createWidget("TreeNode",{title: "node"+i});
myTreeWidget.addChild(node);
var childNode = dojo.widget.createWidget("TreeNode",{title: "Child"+i});
node.addChild(childNode);
}
var treeContainer = document.getElementById("myWidgetContainer");
var placeHolder = document.getElementById("treePlaceHolder");
treeContainer.replaceChild(myTreeWidget.domNode,placeHolder);
}
}
var DemoTreeManager = {
djWdgt: null,
myTreeWidget: null,
ctxMenu: null,
createTreeContextMenu: function(){
ctxMenu = dojo.widget.createWidget("TreeContextMenu",{widgetId:"treeContextMenu"});
document.body.appendChild(ctxMenu.domNode);
},
addTreeContextMenu: function(){
this.myTreeWidget = dojo.widget.manager.getWidgetById("myTreeWidget");
/* Bind the context menu to the tree */
this.ctxMenu.listenTree(this.myTreeWidget);
},
addController: function(){
this.djWdgt.createWidget(
"TreeBasicController",
{widgetId:"myTreeController",DNDController:"create"}
);
},
bindEvents: function(){
var mytree = dojo.widget.manager.getWidgetById("myTreeWidget");
dojo.event.topic.subscribe(mytree.eventNames.titleClick,
function (treeItem) { TreeActions.titleClicked( treeItem.source); }
);
},
init: function(){
this.djWdgt = dojo.widget;
this.createTreeContextMenu();
}
};
var TreeActions = {
titleClicked: function(selectedNode) {
if (!selectedNode) {
alert('No node selected');
return false;
}
var objectId = selectedNode.objectId;
var selectedNodeElement = document.getElementById("selectedNode");
selectedNodeElement.value = objectId;
var isFolderElement = document.getElementById("isFolder");
var isFolderSetting = selectedNode.isFolder;
if ((isFolderSetting == null) || (isFolderSetting == ""))
isFolderSetting = "false";
isFolderElement.value = isFolderSetting;
},
};
dojo.addOnLoad(function(){
dojo.require("dojo.lang.common");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeRPCController");
dojo.require("dojo.widget.TreeContextMenu");
//DemoTreeManager.addTreeContextMenu();
DemoTreeManager.init();
TreeBuilder.buildTree("DemoTree");
DemoTreeManager.bindEvents();
});
</script>
</head>
<body>
<form name="myForm" >
<div dojoType="TreeSelector" widgetId="tSelector" eventNames="select:nodeSelected" ></div>
<div id="myWidgetContainer" style="width:400px; height:300px; overflow:auto;">
<span id="treePlaceHolder" style="background-color:#F00; color:#FFF;">
Loading process tracking folders...
</span>
</div>
</form>
</body>
</html>
