Alex @ Net

Hi,
I have problem to make the context menus work. Below is the code. I manage to get the treeview and the context menu but it seems the context menus are not working. Could you please help me to solve it.
I have tried many ways to solve this problem but it still not working.

Thank you.

<?xml version="1.0" encoding="UTF-8" ?>

Tree Test Page

var djConfig = { isDebug: true };

/* Load Dojo engine */

dojo.require("dojo.lang.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
dojo.require("dojo.widget.TreeBasicController");

//this code working

var treeMenuItem = "TreeMenuItem";
function addTreeContextMenu(){
var djWdgt = dojo.widget;
var ctxMenu = djWdgt.createWidget("TreeContextMenu",{widgetId:"treeCtxMenu"});
ctxMenu.addChild(djWdgt.createWidget(
treeMenuItem,{caption:"Add Item"}));
ctxMenu.addChild(djWdgt.createWidget(
treeMenuItem,{caption:"Edit Item"}));
document.body.appendChild(ctxMenu.domNode);
var myTree = dojo.widget.manager.getWidgetById("myTree");
/* Bind the context menu to the tree */
ctxMenu.listenTree(myTree);
}

dojo.addOnLoad( function(){
addTreeContextMenu();
});

//this code is not working

var DemoTreeManager = {
djWdgt: null,
myTreeWidget: null,
addTreeContextMenu: function(){
var ctxMenu = this.djWdgt.createWidget("TreeContextMenu",{widgetId:"treeCtxMenu"});
ctxMenu.addChild(this.djWdgt.createWidget(
"TreeMenuItem",{caption:"Add Child Menu Item",
widgetId:"ctxAdd"}));
ctxMenu.addChild(this.djWdgt.createWidget(
"TreeMenuItem",{caption:"Delete this Menu Item",
widgetId:"ctxDelete"`}));
document.body.appendChild(ctxMenu.domNode);
/* Bind the context menu to the tree */
var myTree = dojo.widget.manager.getWidgetById("myTree");
ctxMenu.listenTree(myTree);
},
addController: function(){
this.djWdgt.createWidget(
"TreeBasicController",
{widgetId:"myTreeController",DNDController:"create"}
);
},
bindEvents: function(){
/* Bind the functions in the TreeActions object to the
context menu entries */
dojo.event.topic.subscribe("ctxAdd/engage",
function (menuItem) { TreeActions.addNewNode(menuItem.getTreeNode(),
"myTreeController"); }
);
dojo.event.topic.subscribe("ctxDelete/engage",
function (menuItem) { TreeActions.removeNode(menuItem.getTreeNode(),
"myTreeController"); }
);
},
init: function(){
/* Initialize this object */
this.djWdgt = dojo.widget;
this.myTreeWidget = this.djWdgt.manager.
getWidgetById("myTreeWidget");
this.addTreeContextMenu();
this.addController();
this.bindEvents();
}
};

var TreeActions = {
addNewNode: function(parent,controllerId){
this.controller = dojo.widget.manager.getWidgetById(controllerId);
if (!parent.isFolder) {
parent.setFolder();
}
var res = this.controller.createChild(parent, 0, { title: "New node" });
},
removeNode: function(node,controllerId){
if (!node) {
alert("Nothing selected to delete",);
return false;
}
this.controller = dojo.widget.manager.getWidgetById(controllerId);
var res = this.controller.removeNode(node, dojo.lang.hitch(this));
}
};

dojo.addOnLoad(function(){
DemoTreeManager.init()
});

News