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

jQuery - Show Grid View column value on Selectecting Check Box

Article:
Viewed:  912 
Posted On:  5/24/2015 3:54:48 AM 
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:

1.png

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:

2.png

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:

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

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