Post
Ask Question

jQuery: Show GridView Column Value on Select Check Box

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


Similar Articles