In this article I am going to show how we can show Grid
View column value on selectecting Check Box.
Below is my SQL Server Data Table in Design mode:
Image 1.
Script
of My Data Table:
CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name]
[varchar](50) NULL,
[Email]
[varchar](500) NULL,
[Country]
[varchar](50) NULL
) ON [PRIMARY]
GO
Data in My Data Table:
Image 2.
Now my aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryCheckBoxWithGridView.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Show GridView Column Value on Check Bos
Selection Using jQuery</title>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function () {
var chk = $('input:checkbox').click(function (e) {
var selectedValue = '';
$("input[name$=chkEMP]:checked").each(function () {
selectedValue += $(this).next("input[name$=hdnId]").val() + "; ";
});
$('#selEMPDiv').text("Your
Selected Employee : " + selectedValue)
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tblEMP" style="border: solid 2px red; width: 100%; text-align: center;">
<tr>
<td style="height: 30px; background-color: orange; color: #0026ff;
font-size: 20pt; font-weight: bold; font-family: Verdana;">
Show GridView Column
Value on Check Bos Selection Using jQuery</td>
</tr>
<tr>
<td>
<asp:GridView ID="GridViewEMP" runat="server" AutoGenerateColumns="False" Width="90%"
HorizontalAlign="Center" HeaderStyle-BackColor="Green" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkEMP" runat="server" />
<asp:HiddenField ID="hdnId" runat="server" Value='<%#Eval("Name") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</td>
</tr>
<tr>
<td style="height: 30px; background-color: #e5d6d6; color: green; font-size: 11pt; font-weight: bold; font-family: Verdana;">
<p id="selEMPDiv"></p>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Now my aspx.cs code is:
using System;
using
System.Collections.Generic;
using
System.Configuration;
using System.Data;
using
System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
namespace
jQueryCheckBoxWithGridView
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
GetEmployee();
}
private void GetEmployee()
{
string constr = ConfigurationManager.ConnectionStrings["RConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT *
FROM Employee ORDER BY ID"))
{
using (SqlDataAdapter da = new SqlDataAdapter())
{
DataTable dt = new DataTable();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
da.SelectCommand = cmd;
da.Fill(dt);
GridViewEMP.DataSource
= dt;
GridViewEMP.DataBind();
}
}
}
}
}
}
Now run your
application:
Image 3.
Image 4.
Image 5.