Adding right click context menu to YUI treeview

wolf10 · 01-11-2007, 06:56 PM

I am developing a web application for a large corporate intranet. I have been using a lot of AJAX and it has been working very well.

I recently started on a tree-folder display and used the Yahoo treeview control. Again it works very well and I am happy with the results. However, after seeing the treeview folder structure, my client asked if it would possible to add a right mouse click context menu to allow users to modify the folder tree -- add new folders, upload files, rename folders, delete folders, etc.

Updating the tree with the new elements is simple enough, but my attempts to implement the context menu have failed miserably. I have studied the Yahoo documentation and I can identify the name of nodes and the label of the element clicked on. But I can't figure out how to add the right-click code to the nodes the YUI Treeview generates.

I have successfully used various right-click Javascript scripts in the past -- but in those cases I was adding the function to an actual HTML element. The YUI elements are generated by the script, and I am at a loss as how to add the code to the generated node elements.

The application is part of a corporate intranet, and will only be used with Internet Explorer 6.0+ on Windows. The new context menu would completely replace the standard Windows context menu.

I am tempted to hack the YUI Treeview script to see if I can add a right click function similar to the Expand, Collapse and Clicked node functions, but I suspect that there is probably a simpler and easier way to do it.

Anyone have any suggestions?

brandonH · 01-12-2007, 03:21 AM

since its for windows IE you can use oncontextmenu.

and even though the elements are created by the script they are still apart of the dom, which means they can be altered.

to completely replace the original context menu you will have to return false directly after calling for the display of your custom right click menu.

here is an example:

Code:

<html>


<body>

<div id=menu1 oncontextmenu="return myRightclick(this);">item one</div>
<div id=menu2 oncontextmenu="return myRightclick(this);">item two</div>
<div id=menu3 oncontextmenu="return myRightclick(this);">item three</div>
<div id=menu4 oncontextmenu="return myRightclick(this);">item four</div>
<div id=menu5 oncontextmenu="return myRightclick(this);">item five</div>
<div id=menu6 oncontextmenu="return myRightclick(this);">item six</div>


<div style="display:none;position:absolute;background-color:cdcdcd" id=rightMenu onclick="this.style.display='none';" onmouseout=hide() onmouseover=show()>
put content of menu here<br>
example would be the id value of the element right clicked on<Br>
<span id=sp1></span></div>

</body>

<script type=text/javascript>
var hid='';
function hide(){
hid=setTimeout("document.getElementById('rightMenu').style.display='none'",2000);
}

function show(){
clearTimeout(hid);
}
function myRightclick(elm){
rightdiv=document.getElementById('rightMenu');
document.getElementById('sp1').innerHTML="<b>"+elm.id+"</b>";
rightdiv.style.left=event.clientX-4;
rightdiv.style.top=event.clientY-4;
rightdiv.style.display='block';

}

</script>


</html>

of course i would advise not using this if each menu item when clicked on opens up a child menu that is an actual child node of the menu item element.
as the oncontextmenu eventhandler will be called for both elements. if however you have no choice, look into stopping propagation/bubbling.

brandonH · 01-12-2007, 04:02 AM

created a way to stop propagation (right click triggering the oncontextmenu of menu item and its parent node)

replace the function myRightclick() with the below:

Code:

var isok=true;
function myRightclick(elm){
if(isok==true){
rightdiv=document.getElementById('rightMenu');
document.getElementById('sp1').innerHTML="<b>"+elm.id+"</b>";
rightdiv.style.left=event.clientX-4;
rightdiv.style.top=event.clientY-4;
rightdiv.style.display='block';
isok=false;
setTimeout("isok=true",1000);
}
else{return false;}
return false;
}