Here I have created sample that will help you out.
Please download required javascript and css file from below link
http://www.c-sharpcorner.com/Blogs/11128/gridview-with-context-menu-in-Asp-Net.aspx
HTML
<div>
<style type="text/css">
.customerRow
{
background-color: White;
}
</style>
<link href="_assets/css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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>
<script language="javascript" type="text/javascript">
var GridRow;
var LastAction;
var lastRowindex;
var LastGridId;
$(document).ready(function () {
AppenedCustomerRowClass('Gridview1');
AppenedCustomerRowClass('Gridview2');
ContextMenu();
});
function AppenedCustomerRowClass(GridId) {
$('[id*=' + GridId + '] tr').each(function () {
$(this).addClass('customerRow');
});
}
function contextMenuWork(action, el, pos) {
var rowindex = (el[0].rowIndex * 1);
var GridId = $(el).parents('table')[0].id;
switch (action) {
case "paste":
{
if (GridRow == null) {
alert('Please select row to be pasted');
return false;
} else {
$('[id*=' + GridId + '] tr').eq(rowindex).after("<tr>" + $(GridRow).html() + "</tr>");
$('[id*=' + GridId + '] tr').eq(rowindex).next()[0].className = 'customerRow';
}
if (LastAction == 'cut') {
$('[id*=' + LastGridId + '] tr').eq(lastRowindex).remove();
}
ContextMenu();
LastAction = 'paste';
break;
}
case "cut":
{
lastRowindex = rowindex;
GridRow = $(el);
LastGridId = GridId;
$('[id*=' + GridId + '] tr').eq(rowindex).css('background-color', 'darkgray');
LastAction = 'cut';
break;
}
case "copy":
{
if (LastAction == 'cut') {
$('[id*=' + LastGridId + '] tr').eq(lastRowindex).css('background-color', 'White')
}
GridRow = $(el);
LastAction = 'copy';
break;
}
}
return false;
}
function ContextMenu() {
$(".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>
<!-- Right Click Menu -->
<ul id="myMenu" class="contextMenu">
<li class="cut"><a href="#cut">Cut</a></li>
<li class="copy"><a href="#copy">Copy</a></li>
<li class="paste"><a href="#paste">Paste</a></li>
</ul>
*** First Grid ***
<br />
<br />
<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:Label ID="lbl_CustomerID" runat="server" Text='<%# Eval("customerid") %>'></asp:Label>
</ItemTemplate>
</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>
<br />
<br />
*** Second Grid ***
<br />
<br />
<asp:GridView ID="Gridview2" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField HeaderText="CustomerID">
<ItemTemplate>
<asp:Label ID="lbl_CustomerID" runat="server" Text='<%# Eval("customerid") %>'></asp:Label>
</ItemTemplate>
</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>
</div>
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGrid();
BindGrid2();
}
}
private void BindGrid()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("customerid"),
new DataColumn("CompanyName"),
new DataColumn("ContactName") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
Gridview1.DataSource = dt;
Gridview1.DataBind();
}
private void BindGrid2()
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("customerid"),
new DataColumn("CompanyName"),
new DataColumn("ContactName") });
dt.Rows.Add(5, "David", "Morkel");
Gridview2.DataSource = dt;
Gridview2.DataBind();
}
VB
Protected Sub Page_Load(sender As Object, e As EventArgs)
If Not IsPostBack Then
BindGrid()
BindGrid2()
End If
End Sub
Private Sub BindGrid()
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("customerid"), New DataColumn("CompanyName"), New DataColumn("ContactName")})
dt.Rows.Add(1, "John Hammond", "United States")
dt.Rows.Add(2, "Mudassar Khan", "India")
dt.Rows.Add(3, "Suzanne Mathews", "France")
dt.Rows.Add(4, "Robert Schidner", "Russia")
Gridview1.DataSource = dt
Gridview1.DataBind()
End Sub
Private Sub BindGrid2()
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {New DataColumn("customerid"), New DataColumn("CompanyName"), New DataColumn("ContactName")})
dt.Rows.Add(5, "David", "Morkel")
Gridview2.DataSource = dt
Gridview2.DataBind()
End Sub
Screenshot
