wood burning stoves 2.0*
The moose likes HTML, CSS and JavaScript and the fly likes DOJO Tree using 0.4 Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of OCA/OCP Java SE 7 Programmer I & II Study Guide this week in the OCPJP forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "DOJO Tree using 0.4" Watch "DOJO Tree using 0.4" New topic
Author

DOJO Tree using 0.4

Sam Gehouse
Ranch Hand

Joined: Jul 21, 2003
Posts: 281
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>
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: DOJO Tree using 0.4