The following is my SQL Server data table in Design mode.


Image 1 SQL Server Data Table in Design mode

Script of My Data Table

  1. CREATE TABLE [dbo].[Employee](
  2. [ID] [int] IDENTITY(1,1) NOT NULL,
  3. [Name] [varchar](50) NULL,
  4. [Email] [varchar](500) NULL,
  5. [Country] [varchar](50) NULL
  6. ) ON [PRIMARY]
  7. GO
Data in My Data Table


Image 2 My Data table

aspx code
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryCheckBoxWithGridView.Default" %>
  2. <!DOCTYPE html>
  3. <html
  4. xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>Show GridView Column Value on Check Bos Selection Using jQuery</title>
  7. <script src="Scripts/jquery-2.1.4.min.js"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10. var chk = $('input:checkbox').click(function (e) {
  11. var selectedValue = '';
  12. $("input[name$=chkEMP]:checked").each(function () {
  13. selectedValue += $(this).next("input[name$=hdnId]").val() + "; ";
  14. });
  15. $('#selEMPDiv').text("Your Selected Employee : " + selectedValue)
  16. });
  17. });
  18. </script>
  19. </head>
  20. <body>
  21. <form id="form1" runat="server">
  22. <div>
  23. <table id="tblEMP" style="border: solid 2px red; width: 100%; text-align: center;">
  24. <tr>
  25. <td style="height: 30px; background-color: orange; color: #0026ff;
  26. font-size: 20pt; font-weight: bold; font-family: Verdana;">
  27. Show GridView Column Value on Check Bos Selection Using jQuery</td>
  28. </tr>
  29. <tr>
  30. <td>
  31. <asp:GridView ID="GridViewEMP" runat="server" AutoGenerateColumns="False" Width="90%"
  32. HorizontalAlign="Center" HeaderStyle-BackColor="Green" CellPadding="4" ForeColor="#333333" GridLines="None">
  33. <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
  34. <Columns>
  35. <asp:TemplateField>
  36. <ItemTemplate>
  37. <asp:CheckBox ID="chkEMP" runat="server" />
  38. <asp:HiddenField ID="hdnId" runat="server" Value='
  39. <%#Eval("Name") %>' />
  40. </ItemTemplate>
  41. </asp:TemplateField>
  42. <asp:BoundField DataField="ID" HeaderText="ID" ItemStyle-Horizontal HeaderStyle-Horizontal />
  43. <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Horizontal HeaderStyle-Horizontal />
  44. <asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-Horizontal HeaderStyle-Horizontal />
  45. <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Horizontal HeaderStyle-Horizontal />
  46. </Columns>
  47. <EditRowStyle BackColor="#999999" />
  48. <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
  49. <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White"></HeaderStyle>
  50. <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
  51. <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
  52. <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
  53. <SortedAscendingCellStyle BackColor="#E9E7E2" />
  54. <SortedAscendingHeaderStyle BackColor="#506C8C" />
  55. <SortedDescendingCellStyle BackColor="#FFFDF8" />
  56. <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
  57. </asp:GridView>
  58. </td>
  59. </tr>
  60. <tr>
  61. <td style="height: 30px; background-color: #e5d6d6; color: green; font-size: 11pt; font-weight: bold; font-family: Verdana;">
  62. <p id="selEMPDiv"></p>
  63. </td>
  64. </tr>
  65. </table>
  66. </div>
  67. </form>
  68. </body>
  69. </html>
aspx.cs code
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Configuration;
  4. using System.Data;
  5. using System.Data.SqlClient;
  6. using System.Linq;
  7. using System.Web;
  8. using System.Web.UI;
  9. using System.Web.UI.WebControls;
  10. namespace jQueryCheckBoxWithGridView {
  11. public partial class Default: System.Web.UI.Page {
  12. protected void Page_Load(object sender, EventArgs e) {
  13. if (!Page.IsPostBack) GetEmployee();
  14. }
  15. private void GetEmployee() {
  16. string constr = ConfigurationManager.ConnectionStrings["RConnection"].ConnectionString;
  17. using(SqlConnection con = new SqlConnection(constr)) {
  18. using(SqlCommand cmd = new SqlCommand("SELECT * FROM Employee ORDER BY ID")) {
  19. using(SqlDataAdapter da = new SqlDataAdapter()) {
  20. DataTable dt = new DataTable();
  21. cmd.CommandType = CommandType.Text;
  22. cmd.Connection = con;
  23. da.SelectCommand = cmd;
  24. da.Fill(dt);
  25. GridViewEMP.DataSource = dt;
  26. GridViewEMP.DataBind();
  27. }
  28. }
  29. }
  30. }
  31. }
  32. }
Now run the application.


Image 3 Show GridView Column


Image 4 Show GridView Column Selection Using jQuery


Image 5 Show GridView Column Value on CheckBox