This blog is all about to creating GridView
with Context Menu in ASP.NET.
Step 1: .aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ContextMenu.aspx.cs" Inherits="ContextMenu.ContextMenu" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid
View Demo</title>
<link href="_assets/css/StyleSheet.css" rel="stylesheet" type="text/css" />
<link href="_assets/css/confirm.css" rel="stylesheet" type="text/css" />
<link href="_assets/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="_assets/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="_assets/js/jquery.simplemodal-1.1.1.js" type="text/javascript"></script>
<script src="_assets/js/jquery.contextMenu.js" type="text/javascript"></script>
<!-- IE 6 hacks -->
<!--[if lt IE 7]>
<link type='text/css' href='_assets/css/confirm_ie.css' rel='stylesheet'
media='screen' />
<![endif]-->
<style type="text/css">
.customerRow
{
}
.gvhide
{
display:
none;
}
</style>
<script language="javascript" type="text/javascript">
var
CustomerID = null;
var CompanyName =
null;
var ContactName =
null;
$(document).ready(function () {
$(".customerRow").contextMenu({
menu: 'myMenu' },
function (action, el, pos) { contextMenuWork(action, el, pos); });
$(".openmenu").contextMenu({ menu:
'myMenu', leftButton:
true }, function (action, el, pos) {
contextMenuWork(action, el.parent("tr"), pos);
});
});
function contextMenuWork(action, el,
pos) {
var rowindex = (el[0].rowIndex * 1 -
1);
CustomerID = $("#Gridview1_lbl_CustomerID_"
+ rowindex).html();
CompanyName = $("#Gridview1_lbl_CompanyName_"
+ rowindex).html();
ContactName = $("#Gridview1_lbl_ContactName_"
+ rowindex).html();
switch (action) {
case
"delete":
{
var msg = "Delete " + ContactName
+ "?";
confirm(msg);
break;
}
case
"insert":
{
alert("Insert");
break;
}
case "edit":
{
alert("Edit");
break;
}
}
}
function pageLoad() {
$(".customerRow").contextMenu({
menu: 'myMenu' },
function (action, el, pos) { contextMenuWork(action, el, pos); });
$(".openmenu").contextMenu({ menu:
'myMenu', leftButton:
true }, function (action, el, pos) {
contextMenuWork(action, el.parent("tr"), pos);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false" OnRowDataBound="Gridview1_RowDataBound"
AllowPaging="true" OnPageIndexChanging="Gridview1_PageIndexChanging" PageSize="5">
<Columns>
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:Label ID="lbl_CustomerID" runat="server" Text='<%#
Eval("customerid") %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="gvhide" />
<HeaderStyle CssClass="gvhide" />
</asp:TemplateField>
<asp:TemplateField HeaderText="CompanyName">
<ItemTemplate>
<asp:Label ID="lbl_CompanyName" runat="server" Text='<%#
Eval("CompanyName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ContactName">
<ItemTemplate>
<asp:Label ID="lbl_ContactName" runat="server" Text='<%#
Eval("ContactName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel
<!-- Right Click Menu -->
<ul id="myMenu" class="contextMenu">
<li class="insert"><a href="#insert">Add
New</a></li>
<li class="edit"><a href="#edit">Edit</a></li>
<li class="delete"><a href="#delete">Delete</a></li>
</ul>
</form>
</body>
</html>
Step 2 : .cs page
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
namespace
ContextMenu
{
public partial class ContextMenu
: System.Web.UI.Page
{
protected void
Page_Load(object sender,
EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
}
}
private void
BindGrid()
{
DataTable dt =
new DataTable();
dt = GetDatasource();
Gridview1.DataSource = dt;
Gridview1.DataBind();
}
private
DataTable GetDatasource()
{
string path = Server.MapPath("~/customers.xml");
DataSet ds =
new DataSet();
ds.ReadXml(path);
return ds.Tables[0];
}
protected void
Gridview1_RowDataBound(object sender,
GridViewRowEventArgs e)
{
if (e.Row.RowType ==
DataControlRowType.DataRow)
{
DataTable dt =
new DataTable();
dt = (DataTable)Gridview1.DataSource;
int rowindex = e.Row.RowIndex;
e.Row.Attributes.Add("class",
"customerRow");
}
}
protected void
Gridview1_PageIndexChanging(object sender,
GridViewPageEventArgs e)
{
Gridview1.PageIndex = e.NewPageIndex;
BindGrid();
}
}
}
Note:
- Use contextmenu jquery
- Working fine in all the browser like (IE,
Mozilla , Chrome )
- Working fine using Ajax Update Panel.