October 19th, 2011

Show ModalPopUp to Edit Asp.net Gridview Row Values Without using AjaxControlToolkit

This article explains how to add a pop-up control to a gridview in order to display drill-down (Master detail) information without using ajaxcontroltoolkit ModalPopup extender. let us take an example to display Northwind database’s customer table.

gridview popup

GridView Structure:

<asp:GridView ID="GridViewData" runat="server" AutoGenerateColumns="False" DataKeyNames="CustomerID"
            OnRowCommand="GridViewData_RowCommand">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
                <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />
                <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                <asp:BoundField DataField="Address" HeaderText="Address" />
                <asp:BoundField DataField="City" HeaderText="City" />
                <asp:TemplateField HeaderText="" SortExpression="">
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButtonEdit" runat="server" CommandName="ShowPopup" 
CommandArgument='<%#Eval("CustomerID") %>'>Edit</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Bind Data to GridView:

DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings
["NorthwindConnectionString"].ToString());
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Bind();
            }
        }

        protected void Bind()
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("SELECT [CustomerID], [CompanyName], [ContactName], [Address], [City] FROM [Customers] ", con);
            cmd.CommandType = CommandType.Text;
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(dt);
            GridViewData.DataSource = dt;
            GridViewData.DataBind();
        }

Popup Structure:

 <style type="text/css">
       
        #mask
        {
            position: fixed;
            left: 0px;
            top: 0px;
            z-index: 4;
            opacity: 0.4;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; /* first!*/
            filter: alpha(opacity=40); /* second!*/
            background-color: gray;
            display: none;
            width: 100%;
            height: 100%;
        }
    </style>
	<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        function ShowPopup() {
            $('#mask').show();
            $('#<%=pnlpopup.ClientID %>').show();
        }
        function HidePopup() {
            $('#mask').hide();
            $('#<%=pnlpopup.ClientID %>').hide();
        }
        $(".btnClose").live('click',function () {
            HidePopup();
        });
    </script>
    <div id="mask">
    </div>
	  <asp:Panel ID="pnlpopup" runat="server"  BackColor="White" Height="175px"
            Width="300px" Style="z-index:111;background-color: White; position: absolute; left: 35%; top: 12%; 

border: outset 2px gray;padding:5px;display:none">
            <table width="100%" style="width: 100%; height: 100%;" cellpadding="0" cellspacing="5">
                <tr style="background-color: #0924BC">
                    <td colspan="2" style="color:White; font-weight: bold; font-size: 1.2em; padding:3px"
                        align="center">
                        Customer Details <a id="closebtn" style="color: white; float: right;text-decoration:none" class="btnClose"  href="#">X</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="width: 45%; text-align: center;">
                        <asp:Label ID="LabelValidate" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="right" style="width: 45%">
                        CustomerID:
                    </td>
                    <td>
                        <asp:Label ID="lblID" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Contact Name:
                    </td>
                    <td>
                        <asp:Label ID="lblContactName" runat="server"></asp:Label>
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        Address:
                    </td>
                    <td>
                        <asp:TextBox ID="txtAddress" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        City:
                    </td>
                    <td>
                        <asp:TextBox ID="txtCity" runat="server" />
                    </td>
                </tr>
                <tr>
                    <td>
                    </td>
                    <td>
                        <asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update" OnClick="btnUpdate_Click" />
                        <input type="button" class="btnClose" value="Cancel" />
                    </td>
                </tr>
            </table>
        </asp:Panel>

Here mask div is used as a layer to block page elements and pnlpopup will be displayed as popup.

Show & Edit data:

protected void GridViewData_RowCommand(object sender, GridViewCommandEventArgs e)
        {
            if (e.CommandName == "ShowPopup")
            {
                LinkButton btndetails = (LinkButton)e.CommandSource;
                GridViewRow gvrow = (GridViewRow)btndetails.NamingContainer;
                lblID.Text = GridViewData.DataKeys[gvrow.RowIndex].Value.ToString();
                // DataRow dr = dt.Select("CustomerID=" + GridViewData.DataKeys[gvrow.RowIndex].Value.ToString())[0];
                lblContactName.Text = HttpUtility.HtmlDecode(gvrow.Cells[2].Text);
                txtAddress.Text = HttpUtility.HtmlDecode(gvrow.Cells[3].Text);
                txtCity.Text = HttpUtility.HtmlDecode(gvrow.Cells[4].Text);
                Popup(true);
            }
        }

        protected void btnUpdate_Click(object sender, EventArgs e)
        {
            if (txtAddress.Text == "")
            {
                LabelValidate.Text = "Please enter the address.";
                LabelValidate.ForeColor = Color.Red;
            }
            else
            {
                con.Open();
                SqlCommand cmd = new SqlCommand("update Customers set Address=@Address,City=@City where CustomerID=@CustomerID", con);
                cmd.Parameters.AddWithValue("@Address", txtAddress.Text);
                cmd.Parameters.AddWithValue("@City", txtCity.Text);
                cmd.Parameters.AddWithValue("@CustomerID", lblID.Text);
                cmd.ExecuteNonQuery();
                con.Close();
                lblresult.Text = lblContactName.Text + " Details Updated Successfully";
                lblresult.ForeColor = Color.Green;
                Bind();
                Popup(false);
            }
        }
        //To show message after performing operations
        void Popup(bool isDisplay)
        {
            StringBuilder builder = new StringBuilder();
            if (isDisplay)
            {
                builder.Append("<script language=JavaScript> ShowPopup(); </script>\n");
                Page.ClientScript.RegisterStartupScript(this.GetType(), "ShowPopup", builder.ToString());
            }
            else
            {
                builder.Append("<script language=JavaScript> HidePopup(); </script>\n");
                Page.ClientScript.RegisterStartupScript(this.GetType(), "HidePopup", builder.ToString());
            }
        }

Hope, It helps.

  • Bhavesh_hand1234

    Scripts/jquery-1.3.2.min.js

  • Hal9000

    Great tutorial. I set it up and got it working.  I then tried to implement the functionality on an existing page with a gridview on it.  But the javascript

    $(“.btnClose”).live(‘click’,function () {
                 HidePopup(); 
    }
    );

    is giving me: Microsoft JScript runtime error: ‘$’ is undefined

    what am I doing wrong?
    I checked the mask div, panel, and linkbutton, and they all look OK.

  • asad mehmood

    This article is very helpfull to me.using this technique i solve my probem as my requirement.thanx

  • vibha

    Great article.Could you please tell how to add paging in this.thanks

  • Setu Sahu

    GridViewRow object contains 10cells but all cells are blank ????

    why HttpUtility.HtmlDecode(gvrow.Cells[cell_number].Text); returns blank ??

  • samdeb

    You need to have the JQuery file referenced for this to work, if you have already done that may be you can try some diff versions of the file.

  • samdeb

    I think you need to reference the JQuery file in your code and if you have already done that may be you can try few diff versions of the file

  • shwetaaa bharti

    Removing row from secondary gridview but not from the primary gridview and database. . I want a primary gridview in popup which selects some row and that is displayed on secondary grid view and a image button when removes that particular row it gets deleted from secondary grid and unchecked from the primary one.

  • arvind

    Provide content of this string file
    StringBuilder builder = new StringBuilder();

  • lizyantoni

    I have placed a gridView inside the dialog(Panel – pnlpopup) with select button
    if i click on this button the dialog closes

    What can be done to avoid this?

  • Rohan

    jquery-1.3.2.min.js from where we will get this file

  • Hareesh Yalamanchily

    This is very good article works in all browsers, but recently having issue opening the popup in IE 11, any work around please. Thank you.