Email: Password:       Forgot Password 
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.

jQuery - Show Grid View column value on Selectecting Check Box

Viewed:  1904 
Posted On:  24/05/2015 03:54:48 
How we can Show Grid View column value on Selectecting Check Box using jQuery? 

 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

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="">
<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)

    <form id="form1" runat="server">
            <table id="tblEMP" style="border: solid 2px red; width: 100%; text-align: center;">
                    <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>
                        <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" />
                                        <asp:CheckBox ID="chkEMP" runat="server" />
                                        <asp:HiddenField ID="hdnId" runat="server" Value='<%#Eval("Name") %>' />
                                <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" />
                            <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" />
                    <td style="height: 30px; background-color: #e5d6d6; color: green; font-size: 11pt; font-weight: bold; font-family: Verdana;">
                        <p id="selEMPDiv"></p>

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)
        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;
                        GridViewEMP.DataSource = dt;

Now run your application:


Image 3.


Image 4.


Image 5.

         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us