alloyui tree view right click option

Question

I'm using jQuery Fancytree to create a tree view for webpage navigation. I really like the tree view of AlloyUI but there doesn't seem to be any right click option. Does anyone know of JavaScript/HTML based treeview Library that has right click drop down menu option?

Answer 1

If you want to use a custom right-click context menu with AlloyUI's TreeView, you should use YUI's event-contextmenu module.

With some minor changes to "The contextmenu Event Fix"'s example, we can make it work for AlloyUI TreeView:

<div id="treeView" />
<div id="contextMenu" />
<script>
     YUI().use('aui-tree-view', 'event-contextmenu', 'overlay', function (Y) {

        var treeView = new Y.TreeView({
            // ... your TreeView code here
        }).render();

        var contextMenu = new Y.Overlay({
            boundingBox: '#contextMenu',
            bodyContent: "<span class=\"context-menu\">Context Menu</span>",
            visible: false,
            constrain: true
        }).render();

        contextMenu.on('click', function (event) {
            contextMenu.hide();
        });

        treeView.get('boundingBox').on('contextmenu', function (event) {    
            contextMenu.set("xy", [event.pageX, event.pageY]);
            contextMenu.show();
        });
    });
</script>

Here is a JSFiddle using this code and the AlloyUI TreeView example code.