problem in creating a popupMenu onHeaderCtrlClicked event.

Hi,

I have been working on creating a popupmenu when onHeaderctrlclicked is fired. But the problem is grid is disappearing and didn't see the div whose status is visible. I am really looking for an advice on this. I greatly appreciate your time on the same. Please find the code i have added.

/**
* Ctrl clicked event captured at Header level to show context menu with options.
*/
proto_type.onHeaderCtrlClicked = function(event, col) {

alert("check for ctrl click on header");
// proto_type.getHeaderTemplate().setEvent("oncontextmenu", oncontextmenu);
// alert("check2");
this.raiseEvent("onHeaderContextMenu");
}

// html event handler translates to grid events
// proto_type.oncontextmenu = function(event) {
// assign html event handler to header template
// proto_type.getHeaderTemplate().setEvent("oncontextmenu", oncontextmenu);
// this.raiseEvent("onHeaderContextMenu");
// }

// assign grid header event handler to show the contextMenu
proto_type.onHeaderContextMenu = function(event, col){
// alert("context menu event - col:" + col);
this.initContextMenu();
this.writeContextMenu();
this.showContextMenu();

}

proto_type.initContextMenu = function() {
document.write('<div id="contextmenu" class="contextmenu"></div>');
//alert("initContextMenu()");
}

proto_type.writeContextMenu = function() {
// alert("writeContextMenu()");
// hard coding values. [TODO] need to get values from the cache based on the locale.

var left = "moveLeft";
var right = "moveRight";
var contextMenu = document.getElementById("contextmenu");
contextMenu.innerHTML = '<a class="menuItem" href="?action=left&id=' + left + '"><strong>moveLeft</strong></a>';
contextMenu.innerHTML += '<a class="menuItem" href="?action=right&id=' + right + '">moveRight</a>';
alert(contextMenu.innerHTML+":WriteContextMenu()");
}

proto_type.showContextMenu = function(event) {
var contextMenu = document.getElementById("contextmenu");

if ((window.innerWidth - event.clientX) < contextMenu.offsetWidth) {
contextMenu.style.left = (window.pageXOffset + event.clientX - contextMenu.offsetWidth) + "px";
} else {
contextMenu.style.left = event.clientX + "px";
}

if ((window.innerHeight - event.clientY) < contextMenu.offsetHeight) {
contextMenu.style.top = (window.pageYOffset + event.clientY - menuobj.offsetHeight) + "px";
} else {
contextMenu.style.top = e.clientY + "px";
}

contextMenu.style.visibility = "visible";
}


proto_type.hideContextMenu = function() {
document.getElementById("contextmenu").style.visibility = "hidden";
}
i am using the appropritae style properties for the div in the css file for the above.

thanks
Reddappa Gowd