How to make row event popup in gridview when I click on the particular ro of a person

Question

0.00/5 (No votes)

See more:

, +

Hi I want to display a popup message displaying the details of the person when I click on the particular row either in script or code behind.

Note:Without Using any button to display

HTML

<pre>$(document).on("click",  function () {
                $("#id").html($(".EmpId", $(this).closest("tr")).html());
                $("#name").html($(".EmpName", $(this).closest("tr")).html());
                $("#add").html($(".add", $(this).closest("tr")).html());
                $("#dialog").dialog({
                    title: "View Details",
                    buttons: {
                        Ok: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
                return false;
            });
    </script>

What I have tried:

C#

<pre> <div id="dialog" style="display: none">
    Id: <span id="id"></span>
    <br />
    Name: <span id="name"></span>
    <br />
    Department: <span id="Department"></span>
                <br />
    Age: <span id="Age"></span>
                <br />
    Salary: <span id="Salary"></span>
</div>

Posted 20-Feb-17 0:09am

Member 12605293

Updated 20-Feb-17 3:29am

Add a Solution

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 · Accepted Answer · 2017-02-20T03:29:00

Solution 1

try this

protected void Page_Load(object sender, EventArgs e) {
           if (!this.IsPostBack)
           {
               DataTable dt = new DataTable();
               dt.Columns.Add("Id");
               dt.Columns.Add("Name");
               dt.Columns.Add("Description");
               dt.Rows.Add(1, "Apple", "a fruit");
               dt.Rows.Add(2, "Ball", "an object");
               dt.Rows.Add(3, "Cat", "meow");
               dt.Rows.Add(4, "Dog", "bow wow");
               GridView1.DataSource = dt;
               GridView1.DataBind();
           }

       }

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            var grid = document.getElementById('<%= GridView1.ClientID%>');
        $('tr', grid).on('click', function () {
            $("#id").html($(".Id", $(this).closest("tr")).html());
            $("#name").html($(".Name", $(this).closest("tr")).html());
            $("#description").html($(".Description", $(this).closest("tr")).html());
            $("#dialog").dialog({
                title: "View Details",
                buttons: {
                    Ok: function () {
                        $(this).dialog('close');
                    }
                },
                modal: true
            });
        });
    });

    
    </script>

ASP.NET

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
                runat="server" AutoGenerateColumns="false">
                <Columns>
                    <asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
                    <asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
                    <asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
                        ItemStyle-Width="150" />
                    
                </Columns>
            </asp:GridView>
            <div id="dialog" style="display: none">
                Id: <span id="id"></span>
                <br />
                Name: <span id="name"></span>
                <br />
                Description: <span id="description"></span>
            </div>

slightly modified from this based on your question.

Posted 20-Feb-17 3:29am

Karthik_Mahalingam

Updated 20-Feb-17 3:30am

v2

Comments

Member 12605293 20-Feb-17 13:00pm

Hi Karthik
Thanks yu

Karthik_Mahalingam 20-Feb-17 13:34pm

welcome :)

Member 12605293 21-Feb-17 0:29am

Hi Karthik
I am using Itemtemplate instead of boundfield and it is not working :(

Karthik_Mahalingam 21-Feb-17 0:30am

post the gridview markup

Karthik_Mahalingam 21-Feb-17 0:52am

i have added this
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<columns>
<asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />

<asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
ItemStyle-Width="150" />
<asp:templatefield>
<itemtemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Description") %>'>

stil working fine.

Member 12605293 21-Feb-17 1:00am

Hi
Here is my code

<title>

$(function () {
var grid = document.getElementById('<%= gvDetails.ClientID%>');
$('tr', grid).on('click', function () {
$("#id").html($(".EmpId", $(this).closest("tr")).html());
$("#name").html($(".EmpName", $(this).closest("tr")).html());
$("#description").html($(".Dep", $(this).closest("tr")).html());
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});

<%--
div:hover {
background-color:green;
color:orange;
}--%>

<%-- --%>

Employee Details

<asp:DropDownList ID="ddlAge" runat="server" AutoPostBack="true" Width="120px" style="margin-left:790px; margin-top:-1985px"
Font-Size="11px" onselectedindexchanged="ddlAge_SelectedIndexChanged">

<asp:DropDownList ID="ddlAddSalary1" runat="server" AppendDataBoundItems="True" style="margin-left:1040px;margin-top:-3185px" AutoPostBack="true" OnSelectedIndexChanged="ddlAddSalary1_SelectedIndexChanged1" Width="120px" >
<asp:RequiredFieldValidator ID="ddlsal" ValidationGroup="validate" ControlToValidate="ddlAddSalary1" runat="server" onselectedindexchanged="ddlAddSalary1_SelectedIndexChanged">

<asp:GridView ID="gvDetails" style="background-color:lightgreen" DataKeyNames="EmpId,EmpName" runat="server"

AutoGenerateColumns="false" HeaderStyle-BackColor="#61A6F8"
ShowFooter="true" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White"
CellPadding="5" CellSpacing="0"
AllowPaging="true" PageSize="5"
AllowSorting="True" OnRowDataBound="gvDetails_OnRowDataBound"
OnRowCancelingEdit="gvDetails_RowCancelingEdit"
OnRowDeleting="gvDetails_RowDeleting" OnRowEditing="gvDetails_RowEditing"
OnRowUpdating="gvDetails_RowUpdating"
OnRowCommand="gvDetails_RowCommand">

<columns>

<asp:TemplateField HeaderText="EmployeeID">
<itemtemplate>
<asp:Label ID="lblempid" runat="server"
Text='<%# Eval("EmpId")%>'>

<footertemplate>
<asp:TextBox ID="txtempid"
MaxLength="5" runat="server">
<asp:RequiredFieldValidator ID="rfvempid" runat="server" ControlToValidate="txtempid" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="EmployeeName">
<edititemtemplate>
<asp:TextBox ID="txtempname" runat="server" Text='<%#Eval("EmpName") %>' />

<itemtemplate>
<asp:Label ID="lblempname" runat="server" Text='<%#Eval("EmpName") %>' />

<footertemplate>
<asp:TextBox ID="txtempname1" runat="server" onkeypress=" return onlyAlphabets(event,this);" />
<asp:RequiredFieldValidator ID="rfvempname" runat="server" ControlToValidate="txtempnam

Member 12605293 21-Feb-17 1:01am

<asp:TemplateField HeaderText="Department">
<edititemtemplate>
<asp:TextBox ID="txtdep" runat="server" Text='<%#Eval("Dep") %>' />

<itemtemplate>
<asp:Label ID="lbldep" runat="server" Text='<%#Eval("Dep") %>' />

<footertemplate>
<asp:TextBox ID="txtdep1" runat="server" />
<asp:RequiredFieldValidator ID="rfvdep" runat="server" ControlToValidate="txtdep1" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="Age">
<headertemplate>
Age

<edititemtemplate>
<asp:TextBox ID="txtage" runat="server" Text='<%#Eval("Age") %>' />

<itemtemplate>
<asp:Label ID="lblage" runat="server" Text='<%#Eval("Age") %>' />

<footertemplate>
<asp:TextBox ID="txtage1" runat="server" MaxLength="3" onkeypress=" return numeric(event,this);" onchange="handleChange(this);" />
<asp:RequiredFieldValidator ID="rfvage" runat="server" ControlToValidate="txtage1" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="Salary">
<headertemplate>
Salary

<edititemtemplate>
<asp:TextBox ID="txtsal" runat="server" Text='<%#Eval("Sal") %>' />

<itemtemplate>
<asp:Label ID="lblsal" runat="server" Text='<%#Eval("Sal") %>' />

<footertemplate>
<asp:TextBox ID="txtsal1" runat="server" MaxLength="7" onkeypress=" return numeric1(event,this);" />
<asp:RequiredFieldValidator ID="rfvsal" runat="server" ControlToValidate="txtsal1" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="Edit/Delete" HeaderStyle-Width="5%">
<edititemtemplate>
<asp:ImageButton ID="imgbtnUpdate" CommandName="Update" runat="server" ImageUrl="~/Images/update.png" ToolTip="Update" Height="20px" Width="20px" />
<asp:ImageButton ID="imgbtnCancel" runat="server" CommandName="Cancel" ImageUrl="~/Images/cancel.png" ToolTip="Cancel" Height="20px" Width="20px" />

<itemtemplate>
<asp:ImageButton ID="imgbtnEdit" CommandName="Edit" runat="server" ImageUrl="~/Images/Insert.png" ToolTip="Edit" Height="20px" Width="20px" />
<asp:ImageButton ID="imgbtnDelete" CommandName="Delete" Text="Edit" runat="server" ImageUrl="~/Images/delete.png" ToolTip="Delete" Height="10px" Width="10px" />

<footertemplate>
<asp:ImageButton ID="imgbtnAdd" runat="server" ImageUrl="~/Images/Add.png" CommandName="Add" Width="20px"

Karthik_Mahalingam 21-Feb-17 1:06am

what is the issue
pop up not visible ?

Member 12605293 21-Feb-17 1:10am

Yes and it is showing dialog is not a function.
Is there any plugin needed ? Or I have values in database and You have used it dynamically in codebehind,is that an issue??.

Karthik_Mahalingam 21-Feb-17 1:16am

add these

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
        rel="stylesheet" type="text/css" />

Member 12605293 21-Feb-17 1:21am

Yes I have added.Still not working

Karthik_Mahalingam 21-Feb-17 1:33am

Make sure only one jquery reference is added..
Remove the duplicate

Member 12605293 21-Feb-17 2:54am

Yes karthik it s not working

Karthik_Mahalingam 21-Feb-17 3:36am

Now what error

Member 12605293 21-Feb-17 3:46am

The dialog box is empty I dont know which ID'd I have to include either EVAL("") or Edit label Id ,or Item label ID

Karthik_Mahalingam 21-Feb-17 4:42am

Label

Member 12605293 21-Feb-17 4:03am

The dialog box is showing but I dint get the values in the respective label

Karthik_Mahalingam 21-Feb-17 4:42am

You will have query the value from respective controls in th3 item template

Member 12605293 21-Feb-17 4:51am

Can you show me with an example Karthik

Karthik_Mahalingam 21-Feb-17 4:52am

Which controls data you want to show

Member 12605293 21-Feb-17 4:52am

Id,Name and Department

Karthik_Mahalingam 21-Feb-17 4:53am

I am in cab now once I reach near to pc. I will send

Member 12605293 21-Feb-17 4:54am

ok.

Karthik_Mahalingam 21-Feb-17 4:55am

Use debugger and explore

Member 12605293 21-Feb-17 5:05am

Yes I am doing that only

Karthik_Mahalingam 21-Feb-17 5:20am

Ok

Member 12605293 21-Feb-17 5:06am

You want me to add datasource control in aspx page?

Karthik_Mahalingam 21-Feb-17 5:21am

Like label

Karthik_Mahalingam 21-Feb-17 5:29am

i am back to pc, whcih data you want to show in pop up

Member 12605293 21-Feb-17 5:34am

Empid,Empname,Department,Age and Salary

Karthik_Mahalingam 21-Feb-17 5:36am

i will do for emp id you do for the rest

Member 12605293 21-Feb-17 5:40am

one more issue .The popup show even when I try to enter new value inside grid and not allowing me to edit

Member 12605293 21-Feb-17 5:36am

Here is my database
protected void gvDetails_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Equals("Add"))
{
TextBox txtEmpId = (TextBox)gvDetails.FooterRow.FindControl("txtempid");
TextBox txtEmpName = (TextBox)gvDetails.FooterRow.FindControl("txtempname1");
TextBox txtEmpDep = (TextBox)gvDetails.FooterRow.FindControl("txtdep1");
TextBox txtAge = (TextBox)gvDetails.FooterRow.FindControl("txtage1");
TextBox txtSal = (TextBox)gvDetails.FooterRow.FindControl("txtsal1");

cn.Open();
SqlCommand cmd =
new SqlCommand(
"insert into gvdetails17(EmpId,EmpName,Dep,Age,Sal) values('" + txtEmpId.Text + "','" + txtEmpName.Text + "','" +
txtEmpDep.Text + "','" + txtAge.Text + "','" + txtSal.Text + "')", cn);
int result = cmd.ExecuteNonQuery();
cn.Close();
if (result == 1)
{
bind();

}
else
{

}
}
}

Karthik_Mahalingam 21-Feb-17 5:39am


<asp:TemplateField HeaderText="EmployeeID">
                    <ItemTemplate>
                        <asp:Label ID="lblempid" runat="server" class="clsempid"
                            Text='<%# Eval("EmpId")%>' ></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>


   $("#description").html($(".clsempid", $(this).closest("tr")).text());

note this class="clsempid"

Member 12605293 21-Feb-17 5:37am

Here is my aspx page with few code piece

<asp:GridView ID="gvDetails" style="background-color:lightgreen; border-collapse: collapse;
background-color: lightgreen;
margin-top: -53px;" DataKeyNames="EmpId,EmpName" runat="server"
OnPageIndexChanging="OnPaging"
AutoGenerateColumns="false" HeaderStyle-BackColor="#61A6F8"
ShowFooter="true" HeaderStyle-Font-Bold="true" HeaderStyle-ForeColor="White"
CellPadding="10" CellSpacing="0"
AllowPaging="true" PageSize="5"
AllowSorting="True" OnRowDataBound="gvDetails_OnRowDataBound"
OnRowCancelingEdit="gvDetails_RowCancelingEdit"
OnRowDeleting="gvDetails_RowDeleting" OnRowEditing="gvDetails_RowEditing"
OnRowUpdating="gvDetails_RowUpdating"
OnRowCommand="gvDetails_RowCommand" OnSelectedIndexChanged="OnSelectedIndexChanged">

<columns>

<asp:TemplateField HeaderText="EmployeeID">
<itemtemplate>
<asp:Label ID="lblempid" runat="server"
Text='<%# Eval("EmpId")%>'>

<footertemplate>
<asp:TextBox ID="txtempid"
MaxLength="5" runat="server">
<asp:RequiredFieldValidator ID="rfvempid" runat="server" ControlToValidate="txtempid" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="EmployeeName">
<edititemtemplate>
<asp:TextBox ID="txtempname" runat="server" Text='<%#Eval("EmpName") %>' />

<itemtemplate>
<asp:Label ID="lblempname" runat="server" Text='<%#Eval("EmpName") %>' />

<footertemplate>
<asp:TextBox ID="txtempname1" runat="server" onkeypress=" return onlyAlphabets(event,this);" />
<asp:RequiredFieldValidator ID="rfvempname" runat="server" ControlToValidate="txtempname1" Text="*" ValidationGroup="validaiton" />

<asp:TemplateField HeaderText="Department">
<edititemtemplate>
<asp:TextBox ID="txtdep" runat="server" Text='<%#Eval("Dep") %>' />

<itemtemplate>
<asp:Label ID="lbldep" runat="server" Text='<%#Eval("Dep") %>' />

<footertemplate>
<asp:TextBox ID="txtdep1" runat="server" />
<asp:RequiredFieldValidator ID="rfvdep" runat="server" ControlToValidate="txtdep1" Text="*" ValidationGroup="validaiton" />

Karthik_Mahalingam 21-Feb-17 5:41am

posted the sample, try that

Member 12605293 21-Feb-17 6:04am

Yes Karthik works good but a small issue,It not allow to to add/edit/update

Karthik_Mahalingam 21-Feb-17 6:06am

:(off topic.
pls close this and post this as new question.. i think the thread is going long. :)

Karthik_Mahalingam 21-Feb-17 9:37am

-

Member 12605293 24-Feb-17 2:00am

Hi I Have sent an email please see them and reply to those tw0 email ids.Thanks karthik

Regards,
Alston

Karthik_Mahalingam 24-Feb-17 2:01am

no i cant, i am at office now..
reply over here.

Member 12605293 24-Feb-17 2:27am

Ok Karthik
My only issue is how to restrict popup box when I click on the controls like insert update delete and footer textboxes.

1.Is that possible to add a class in footer part?
2.Or any other way is there to restrict this issue
3.When I click anywhere inside grid view the popup appears ,I want only to the row event but not the button and footer controls which is also inside gridview.

Karthik_Mahalingam 24-Feb-17 2:30am

$('tr', grid).on('click', function (a,b,c) {
console.log(a,b,c);

check what you are getting in a, b,c in console window or google chrome ( F12 )

Member 12605293 24-Feb-17 2:28am

$(function () {

var grid = document.getElementById('<%= gvDetails.ClientID%>');
$('tr', grid).on('click', function (obj, b) {
if (['Update', 'Edit', 'Add'].indexOf(obj.target.type) == "image")
return true;
else
$("#id").html($(".clsempid", $(this).closest("tr")).html());
$("#name").html($(".clsempid1", $(this).closest("tr")).html());
$("#department").html($(".clsempid2", $(this).closest("tr")).html());
$("#age").html($(".clsempid3", $(this).closest("tr")).html());
$("#sal").html($(".clsempid4", $(this).closest("tr")).html());
$("#dialog").dialog({
title: "View Details",
buttons: {
Ok: function () {
$(this).dialog('close');
}
},
modal: true
});
});
});

Karthik_Mahalingam 24-Feb-17 2:32am

$('tr', grid).on('click', function (obj, b) {
console.log(obj);
console.log(b);

in the above 2 object you will be getting the information about the buttons, jsut try to find which one is that.

Member 12605293 24-Feb-17 3:38am

Hi Karthik
The window screen is not showing.How to do this?

Karthik_Mahalingam 24-Feb-17 3:40am

https://developer.chrome.com/devtools

Karthik_Mahalingam 24-Feb-17 3:40am

you from india?

Member 12605293 24-Feb-17 3:48am

yes.I am new to development.Completed my graduation last year.

Karthik_Mahalingam 24-Feb-17 3:51am

ok.

Member 12605293 24-Feb-17 3:53am

Hi Karthik.
Thanks for your patience
f.Event {originalEvent: MouseEvent, type: "click", timeStamp: 3206.8650000000002, jQuery17203965917977842508: true, toElement: input#gvDetails_txtempid…}
Grid20fin1:148 undefined
Grid20fin1:147 f.Event {originalEvent: MouseEvent, type: "click", timeStamp: 18886.180000000004, jQuery17203965917977842508: true, toElement: td…}
Grid20fin1:148 undefined

Karthik_Mahalingam 24-Feb-17 3:55am

expand all the node and take a screenshot and share the link

Member 12605293 24-Feb-17 4:04am

http://localhost:55596/Grid20fin1

Karthik_Mahalingam 24-Feb-17 4:05am

:(its local host, i cant access

Member 12605293 24-Feb-17 4:07am

:(

Karthik_Mahalingam 24-Feb-17 4:09am

take a screenshot and post and share the link

imgur.com

Member 12605293 24-Feb-17 5:16am

Hi Sorry for the delay.posted the image there but it is still showing url:imgur.com

Karthik_Mahalingam 24-Feb-17 5:17am

:(

Member 12605293 24-Feb-17 5:21am

Bro your are replying to my message immediately but I am unable to cope up with your need :(..Thank you

Karthik_Mahalingam 24-Feb-17 5:23am

it shows the interest.

Member 12605293 24-Feb-17 5:22am

If possible pls check the mail

Karthik_Mahalingam 24-Feb-17 5:22am

as i said, i dont have access to mails

Member 12605293 24-Feb-17 5:37am

Are you in wattsapp?

Karthik_Mahalingam 24-Feb-17 5:49am

i dont encourage whatspp.. since i am getting lot of pings

Member 12605293 24-Feb-17 5:53am

ok.By the way thanks fr the answers.For time being I bypassed this issue with doubleclick

Karthik_Mahalingam 24-Feb-17 5:55am

ok