Scroll To Top
Blog

GridView with Context Menu in ASP.NET

By Gohil Jayendrasinh Mar 15, 2013
This blog is all about to creating GridView with Context Menu in ASP.NET.

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:

  1. Use contextmenu jquery
  2. Working fine in all the browser like (IE, Mozilla , Chrome )
  3. Working fine using Ajax Update Panel.
Clipboard02.jpg