How to Add Context Menu To The ASP.Net Web Controls

--------------------------------------------------------------------------
Copy the below StyleSheet code and Save it and link to the application as
<link type="text/css" rel="stylesheet" href ="CSS/ContextMenu.css" />

--------------------------------------------------------------------------
ul.SimpleContextMenu {
display: none;
position: absolute;
margin: 0px;
padding: 0px;
font-family: verdana;
font-size: 12px;
list-style-type: none;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
}

ul.SimpleContextMenu li {
border-bottom: 1px solid #000000;
}

ul.SimpleContextMenu li a {
display: block;
width: 100px;
padding: 2px 10px 3px 10px;
text-decoration: none;
color: #ff0000;
background: #eeeeee;
}

ul.SimpleContextMenu li a:hover {
text-decoration: none;
color: #ffffff;
background: #ff0000;
}
--------------------------------------------------------------------------
Copy the below javascript code Save it and add it to your application as
<script type="text/javascript" src="Javascript/ContextMenu.js"></script>

--------------------------------------------------------------------------
var SimpleContextMenu = {

// private attributes
_menus : new Array,
_attachedElement : null,
_menuElement : null,
_preventDefault : true,
_preventForms : true,


// public method. Sets up whole context menu stuff..
setup : function (conf) {

if ( document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.IE = true;
}

if ( !document.all && document.getElementById && !window.opera ) {
SimpleContextMenu.FF = true;
}

if ( document.all && document.getElementById && window.opera ) {
SimpleContextMenu.OP = true;
}

if ( SimpleContextMenu.IE || SimpleContextMenu.FF ) {

document.oncontextmenu = SimpleContextMenu._show;
document.onclick = SimpleContextMenu._hide;

if (conf && typeof(conf.preventDefault) != "undefined") {
SimpleContextMenu._preventDefault = conf.preventDefault;
}

if (conf && typeof(conf.preventForms) != "undefined") {
SimpleContextMenu._preventForms = conf.preventForms;
}

}

},


// public method. Attaches context menus to specific class names
attach : function (classNames, menuId) {

if (typeof(classNames) == "string") {
SimpleContextMenu._menus[classNames] = menuId;
}

if (typeof(classNames) == "object") {
for (x = 0; x < classNames.length; x++) {
SimpleContextMenu._menus[classNames[x]] = menuId;
}
}

},


// private method. Get which context menu to show
_getMenuElementId : function (e) {

if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = event.srcElement;
} else {
SimpleContextMenu._attachedElement = e.target;
}

while(SimpleContextMenu._attachedElement != null) {
var className = SimpleContextMenu._attachedElement.className;

if (typeof(className) != "undefined") {
className = className.replace(/^\s+/g, "").replace(/\s+$/g, "")
var classArray = className.split(/[ ]+/g);

for (i = 0; i < classArray.length; i++) {
if (SimpleContextMenu._menus[classArray[i]]) {
return SimpleContextMenu._menus[classArray[i]];
}
}
}

if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
} else {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
}
}

return null;

},


// private method. Shows context menu
_getReturnValue : function (e) {

var returnValue = true;
var evt = SimpleContextMenu.IE ? window.event : e;

if (evt.button != 1) {
if (evt.target) {
var el = evt.target;
} else if (evt.srcElement) {
var el = evt.srcElement;
}

var tname = el.tagName.toLowerCase();

if ((tname == "input" || tname == "textarea")) {
if (!SimpleContextMenu._preventForms) {
returnValue = true;
} else {
returnValue = false;
}
} else {
if (!SimpleContextMenu._preventDefault) {
returnValue = true;
} else {
returnValue = false;
}
}
}

return returnValue;

},


// private method. Shows context menu
_show : function (e) {

SimpleContextMenu._hide();
var menuElementId = SimpleContextMenu._getMenuElementId(e);

if (menuElementId) {
var m = SimpleContextMenu._getMousePosition(e);
var s = SimpleContextMenu._getScrollPosition(e);

SimpleContextMenu._menuElement = document.getElementById(menuElementId);
SimpleContextMenu._menuElement.style.left = m.x + s.x + 'px';
SimpleContextMenu._menuElement.style.top = m.y + s.y + 'px';
SimpleContextMenu._menuElement.style.display = 'block';
return false;
}

return SimpleContextMenu._getReturnValue(e);

},


// private method. Hides context menu
_hide : function () {

if (SimpleContextMenu._menuElement) {
SimpleContextMenu._menuElement.style.display = 'none';
}

},


// private method. Returns mouse position
_getMousePosition : function (e) {

e = e ? e : window.event;
var position = {
'x' : e.clientX,
'y' : e.clientY
}

return position;

},


// private method. Get document scroll position
_getScrollPosition : function () {

var x = 0;
var y = 0;

if( typeof( window.pageYOffset ) == 'number' ) {
x = window.pageXOffset;
y = window.pageYOffset;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
x = document.body.scrollLeft;
y = document.body.scrollTop;
}

var position = {
'x' : x,
'y' : y
}

return position;

}

}

After this add this Javascript code
=======================================
<script type="text/javascript">
SimpleContextMenu.setup({'preventDefault':true, 'preventForms':false});
SimpleContextMenu.attach('container', 'CM1');
</script>

Add your menus as like the below samples
=========================================
<ul id="CM1" class="SimpleContextMenu" style="z-index: 202">
<li><a href="#">Edit Service</a></li>
<li><a href="#">Delete Service</a></li>
</ul>

Finally call the stylesheet class where u need it.For Example
==============================================================