Start Building Professional
Web Apps Today

Context Menus on inline XML Trees using enableContextMenu

Hi,

I am attempting to add a context menu to a tree, I would like to disable (hide) certain menu entries based on the node clicked and I am using the pro-version I have opted to use enableContextMenu method on the tree. I have created the menu, which works (I've tested it as a context menu assigned to the containing div). When I add the context menu to the tree using the enableContextMenu("myMenu") method the menu throws an error when it is called in the browser page. The error is described as 'el.a is not a function'. If the context menu is added to the page using libraryMenu.setContextZone("time_profile_library_tree", "root_div"); the menu works without a problem.

I am using inline XML to generate the tree and the browser that throws the error is Firefox 2.x using Firebug, but I am seeing similar functionality in other browsers on Mac OS X.

Below are code snippets:

<script>
    libraryMenu = new dhtmlXContextMenuObject('120', 0, "TimeProfileLibraryMenu");        
        
    libraryMenu.menu.addItem(libraryMenu.menu, new dhtmlXMenuItemObject("ctxMnuPreviewTimeProfile",
        "${mnuLabelPreview}",     "", "", "contextMenu"));
    libraryMenu.menu.addItem(libraryMenu.menu, new dhtmlXMenuDividerYObject("ctxMnuLibraryDivider",    "","", "", ""));        
    libraryMenu.menu.addItem(libraryMenu.menu, new dhtmlXMenuItemObject("ctxMnuAddTimeProfile", "${mnuLabelAdd}",                 "", "", "contextMenu"));
    libraryMenu.menu.addItem(libraryMenu.menu, new dhtmlXMenuItemObject("ctxMnuEditTimeProfile", "${mnuLabelEdit}",             "", "", "contextMenu"));                

    libraryMenu.setOnShowMenuHandler(onShowTimeProfileCtxMenu);        
    libraryMenu.setContextMenuHandler(onClickTimeProfileCtxMenu);     
</script>

<div id="time_profile_library_tree" setImagePath="images/dhtmlx-imgs/"
    enableDragAndDrop="true" enableMercyDrag="true" setDragHandler="handleTimeProfileTreeDrag"
    enableContextMenu="libraryMenu" class="dhtmlxTree">

    //item code goes here

</div>

I've read elsewhere the order of the imports may effect the operation, below are the import statements for the js libraries.

<script type="text/javascript" src="res/scripts/dhtmlx/menu/dhtmlxcommon.js"></script>        
<script type="text/javascript" src="res/scripts/dhtmlx/menu/dhtmlxprotobar.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/menu/dhtmlxmenubar.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/menu/dhtmlxmenubar_cp.js"></script>

<script type="text/javascript" src="res/scripts/dhtmlx/tree/dhtmlxcommon.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/tree/dhtmlxtree.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/tree/ext/dhtmlxtree_start.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/tree/ext/dhtmlXTree_dd.js"></script>
<script type="text/javascript" src="res/scripts/dhtmlx/tree/ext/dhtmlxtree_dragin.js"></script>

Once again any pointers to what I have overlooked are most appreciated, if you need anymore information please let me know.

Thanks

The enableContextMenu requires an object as parameter, not the name, so the correct command will be
    tree.enableContextMenu(libraryMenu)

>>The error is described as 'el.a is not a function'.
Such error occurs when you using something different from context menu object as parameter of enableContextMenu

>>    enableContextMenu="libraryMenu"
Unfortunately this will not work , the name will not be resolved automatically.
You can add next code to the page to make such approach possible

<script>
    dhtmlXTreeObject.prototype.enableContextMenuA=function(name){
        this.enableContextMenu(eval(name)); //resolve name
    }
</script>

and in HTMLdescribe it as
<div id="time_profile_library_tree" setImagePath="images/dhtmlx-imgs/"
    enableDragAndDrop="true" enableMercyDrag="true" setDragHandler="handleTimeProfileTreeDrag"
    enableContextMenuA="libraryMenu" class="dhtmlxTree">