Oct 19, 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.

18 comments

  1. Gridview show be placed inside panel ?? Sorry it is not working for me, Can anyone help me out where I am going wrong.

  2. 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.

  3. 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?

  4. 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.

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

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

  6. 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.

    1. 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.

    2. 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

Leave a Reply

Your email address will not be published. Required fields are marked *