Display data on Click of Row in GridView using Jquery in Asp.net
//Table Script————————————————–
CREATE TABLE [tblgrid](
[UserId] [int] IDENTITY(1,1) NOT NULL,
[userName] [varchar](50) NULL,
[City] [varchar](50) NULL,
[Designation] [varchar](50) NULL,
[sal] [bigint] NULL
)
Aspx Page or Design Page——————————————-
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title></title>
<script src=”https://dotnettricks-abdul.in/Contents/jquery-1.4.1.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#GridView1 tr”).click(function (event) {
var name = $(this).find(“td:nth-child(1)”).text();
var City = $(this).find(“td:nth-child(2)”).text();
var des = $(this).find(“td:nth-child(3)”).text();
var sal = $(this).find(“td:nth-child(4)”).text();
$(“#dv”).attr(“style”, “block”);
$(“#City”).html(City);
$(“#UName”).html(name);
$(“#Des”).html(des);
$(“#Sal”).html(sal);
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”false” OnRowDataBound=”GridView1_RowDataBound”
DataKeyNames=”UserId”>
<Columns>
<asp:TemplateField HeaderText=”User Name”>
<ItemTemplate>
<asp:Label ID=”lblname” runat=”server” Text='<%# Eval(“userName”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”City”>
<ItemTemplate>
<asp:Label ID=”lblCity” runat=”server” Text='<%# Eval(“City”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”Designation”>
<ItemTemplate>
<asp:Label ID=”lblDesignation” runat=”server” Text='<%# Eval(“Designation”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=”sal”>
<ItemTemplate>
<asp:Label ID=”lblsal” runat=”server” Text='<%# Eval(“sal”) %>’></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<br />
<div id=”dv” runat=”server” style=”display: none;”>
<table>
<tr>
<td>
User Name:
</td>
<td id=”UName”>
</td>
</tr>
<tr>
<td>
City:
</td>
<td id=”City”>
</td>
</tr>
<tr>
<td>
Designation:
</td>
<td id=”Des”>
</td>
</tr>
<tr>
<td>
Salary:
</td>
<td id=”Sal”>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Code Behind Page or Aspx.cs Page————————————————
SqlConnection con = new SqlConnection(“Data Source=.\\SQLExpress;Initial Catalog=abc;Integrated Security=True”);
SqlDataAdapter da = new SqlDataAdapter();
SqlCommand cmd = new SqlCommand();
DataSet ds = new DataSet();
protected void Page_Load(object sender, EventArgs e)
{
cmd.CommandText=”select * from tblgrid”;
cmd.Connection=con;
da.SelectCommand = cmd;
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
int id = Convert.ToInt32(GridView1.DataKeys[e.Row.RowIndex].Value);
e.Row.Attributes.Add(“onclick”, “JavaScript: GetData(” + id + “)”);
e.Row.Attributes.Add(“onmouseover”, “JavaScript:this.style.cursor=’pointer’; this.style.backgroundColor=’Red'”);
e.Row.Attributes.Add(“onmouseout”, “this.style.backgroundColor=’white'”);
}
}
