Post
Ask Question

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