How do I open popup window on gridview cell click in ASP.NET C#

Question

0.00/5 (No votes)

See more:

hi,
Here i gridview with columns ENTRYNO,ENTRYDT,DESCR,AMT,REMARKS and one checkbox.Initially remarks is empty.Whenever i click remarks column cell then i have to open new popup window and enter remarks in popup window textbox control and assign back to remarks column .This is requirement i am not getting exact soluntion.
Please help me.

What I have tried:

This is what i have tried.

<asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO" 
        AutoGenerateColumns="false" >
	<Columns>
	<asp:BoundField  DataField="ENTRYNO" HeaderText="ENTRYNO" />
	<asp:BoundField DataField="ENTRYDT" HeaderText="ENTRYDT" />
	<asp:BoundField DataField="DESCR" HeaderText="DESCR" />
	<asp:BoundField DataField="AMT" HeaderText="AMT" />
      <asp:TemplateField HeaderText="A">
           <ItemTemplate>
          <asp:CheckBox ID="ChkApproved" runat="server"   OnCheckedChanged="ChkApproved_CheckedChanged" AutoPostBack="true">
              </asp:CheckBox>
          </ItemTemplate>
          </asp:TemplateField>
	<asp:TemplateField HeaderText="Remarks">
	<ItemTemplate>
        <asp:Label ID="lblRemarksGrid" runat="server" Text="" Width="200Px"></asp:Label>
	</ItemTemplate>
	</asp:TemplateField>
	<asp:TemplateField HeaderText="">
	<ItemTemplate>
		<asp:LinkButton ID="lnkRemark" Text="Add Remark"  OnClick="lnkRemark_Click" runat="server"></asp:LinkButton>
	</ItemTemplate>
	</asp:TemplateField>
	</Columns>
</asp:GridView>

<asp:Label ID="lblmsg" runat="server"/>
<asp:Button ID="modelPopup" runat="server" style="display:none" />
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="modelPopup" PopupControlID="updatePanel"
CancelControlID="btnCancel" BackgroundCssClass="tableBackground">
</asp:ModalPopupExtender>
<asp:Panel ID="updatePanel" runat="server" BackColor="White" Height="230px" Width="300px" style="display:none">
<table width="100%" cellspacing="4">
	<tr style="background-color:#33CC66">
	<td colspan="2"  align="center">Document Details</td>
	</tr>
	
	<tr>
		<td align="right">
		ENTER REMARKS:
		</td>
		<td>
		<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine"/>
		</td>
	</tr>

	<tr>
		<td align="right" >
		<asp:Button ID="btnUpdate" CommandName="Update" runat="server" Text="Update Data" onclick="btnModity_Click"/>
		</td>
		<td>
		<asp:Button ID="btnCancel" runat="server" Text="Cancel" />
		</td>
	</tr>
</table>
</asp:Panel>

This is lnkRemark_Click event
 protected void lnkRemark_Click(object sender, EventArgs e)
	{
		this.ModalPopupExtender1.Show();
	}

and ChkApproved_CheckedChanged event 
 protected void ChkApproved_CheckedChanged(object sender, EventArgs e)
    {


        if (txtRemarks.Text == "")
        {
        }
        else
        {
            CheckBox chkStatus = sender as CheckBox;
            GridViewRow selectedrow = (GridViewRow)chkStatus.NamingContainer;
            foreach (GridViewRow row in gridView1.Rows)
            {
                Label lblRemarksGrid = (Label)selectedrow.FindControl("lblRemarksGrid");
                if (chkStatus.Checked == true)
                {
                    //  row.Cells[5].Text = txtRemarks.Text;
                    lblRemarksGrid.Text = txtRemarks.Text;
                }
                else
                {

                    lblRemarksGrid.Text = "";
                }
            }
        }
     
    }

Posted 26-Dec-17 22:56pm

SujataJK

Updated 26-Dec-17 23:56pm

Add a Solution

Comments

Karthik_Mahalingam 27-Dec-17 5:11am

using javascript/jquery will simplify your task.

SujataJK 27-Dec-17 5:26am

Thanks.
Please Share realated link or code

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Karthik_Mahalingam · Answer 1 · 2017-12-26T23:56:00

ASPX

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
     
    <script>
        var selectedRow = undefined;
        function showpopup(obj) {
            var modal = document.getElementById('myModal');
            modal.style.display = "block"; 
            selectedRow = obj.parentElement.parentElement;
           
            var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
            var value = lbl.textContent;
            document.getElementById('txtRemarks').value = value;
        }
        function closepopup() {
            var modal = document.getElementById('myModal');
            modal.style.display = "none";
        }
        function okpopup() {
            debugger
            var modal = document.getElementById('myModal');
            modal.style.display = "none";
            if(selectedRow ){
                var lbl = selectedRow.getElementsByClassName('clsRemarksGrid')[0]
                var value = document.getElementById('txtRemarks').value;
                lbl.textContent = value;
            }
        }
    </script>

    <style>
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        /* Modal Content */
        .modal-content {
            position: relative;
            background-color: #fefefe;
            margin: auto;
            padding: 0;
            border: 1px solid #888;
            width: 400px;
            box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
            -webkit-animation-name: animatetop;
            -webkit-animation-duration: 0.4s;
            animation-name: animatetop;
            animation-duration: 0.4s;
        }

        /* Add Animation */
        @-webkit-keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }

            to {
                top: 0;
                opacity: 1;
            }
        }

        @keyframes animatetop {
            from {
                top: -300px;
                opacity: 0;
            }

            to {
                top: 0;
                opacity: 1;
            }
        }

        /* The Close Button */
        .close {
            color: white;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

            .close:hover,
            .close:focus {
                color: #000;
                text-decoration: none;
                cursor: pointer;
            }

        .modal-header {
            padding: 5px;
            background-color: #5cb85c;
            color: white;
        }

        .modal-body {
            padding: 5px;
            height: 100px;
        }

        .modal-footer {
            padding: 2px 16px;
            background-color: #5cb85c;
            color: white;
        }
    </style>

</head>
<body>
    <form id="form1" runat="server">


        <asp:GridView runat="server" ID="gridView1" DataKeyNames="ENTRYNO"
            AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="ENTRYNO" HeaderText="ENTRYNO" />
                <asp:TemplateField HeaderText="A">
                    <ItemTemplate>
                        <asp:CheckBox ID="ChkApproved" runat="server"></asp:CheckBox>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Remarks">
                    <ItemTemplate>
                        <asp:Label ID="lblRemarksGrid" CssClass="clsRemarksGrid" runat="server" Text="" Width="200Px"></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                        <asp:LinkButton ID="lnkRemark" Text="Add Remark" OnClientClick="showpopup(this); return false" runat="server"></asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

        <div id="myModal" class="modal">
            <!-- Modal content -->
            <div class="modal-content">
                <div class="modal-header">
                    <span onclick="closepopup()" class="close">×</span>
                    <h2 style="margin: 3px;">Modal Header</h2>
                </div>
                <div class="modal-body">
                    Remarks:
                    <asp:TextBox ID="txtRemarks" runat="server"></asp:TextBox>
                    <br />
                    <button onclick="okpopup(); return false;">Ok</button>
                </div>

            </div>
    </form>
</body>
</html>

protected void Page_Load(object sender, EventArgs e)
      {

          if (!Page.IsPostBack)
          {

              DataTable dt = new DataTable();
              dt.Columns.Add("ENTRYNO");
              for (int i = 0; i < 5; i++)
                  dt.Rows.Add(i);
              gridView1.DataSource = dt;
              gridView1.DataBind();



          }
      }