This article would explain about the creating context menu for grid view in asp.net using java script to avoid unnecessary post backs as shown in following GUI.
The steps to create the context menu are:
Design your Grid View like this
<asp:GridView ID="gvResults" runat="server" AutoGenerateColumns="false" OnRowCommand="gvResults_RowCommand" EmptyDataText="Results not found">
<Columns>
<asp:TemplateField ItemStyle-Width="3%">
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:Label ID="lblID runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "UserID")%>'></asp:Label>
<ul id="ulMenu" runat="server" class="SimpleContextMenu" style="width: 120px">
<li>
<asp:LinkButton ID="lnkEdit" runat="server" CausesValidation="false" CommandName="EditUser" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"UserID")%>'>
<asp:Image ID="Image2" runat="server" SkinID="Edit"> Edit</asp:LinkButton>
</li>
<li>
<asp:LinkButton ID="lnkView" runat="server" CausesValidation="false" CommandName="View" CommandArgument='<%#DataBinder.Eval(Container.DataItem,"UserID")%>'>
<asp:Image ID="imgbtnSendMailContext" runat="server" ToolTip="Click here to View" SkinID="ImgSendMail" /> View </asp:LinkButton>
</li>
</ul>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
In the above, I have designed context menu for Edit and View. And I have used Link buttons to give command arguemnts to raise events is GridView_RowCommand Event by using respective command name.
Add below Script
<script language="javascript" type="text/javascript">
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();
if (SimpleContextMenu._menuElement)
{
SimpleContextMenu._menuElement.style.display = 'none';
}
var menuElementId = SimpleContextMenu._getMenuElementId(e);
if (menuElementId) {
var m = SimpleContextMenu._getMousePosition(e);
var s = SimpleContextMenu._getScrollPosition(e);
SimpleContextMenu._menuElement = document.getElementById(menuElementId);
if(SimpleContextMenu._menuElement != null)
{
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;
}
else
{
return true;
}
}
return SimpleContextMenu._getReturnValue(e);
},
// private method. Hides context menu
_hide : function () {
if (SimpleContextMenu._menuElement)
{
SimpleContextMenu._menuElement.style.display = 'none';
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]]) {
SimpleContextMenu._menuElement.style.display = 'block';
}
}
}
if (SimpleContextMenu.IE) {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentElement;
} else {
SimpleContextMenu._attachedElement = SimpleContextMenu._attachedElement.parentNode;
}
}
}
},
// 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;
}
}
</script>
In Code behind.... .aspx.cs
Create a method like below called after Binding Data to grdi view
void SetStyles()
{
foreach (GridViewRow row in gvResults.Rows)
{
HtmlGenericControl menu = row.FindControl("ulMenu") as HtmlGenericControl;
string attachScript = "SimpleContextMenu.attach('hightlighrow', '" + menu.ClientID + "')";
attachScript = "SimpleContextMenu.attach('hightlighMenu', '" + menu.ClientID + "')";
}
}
Note: // here hightlighrow, hightlighMenu are css class names.
Summary:
The Context menu is for better usage and avoiding un- necessary post backs.