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 Read Grid View Column Value

Article:
Viewed:  775 
Posted On:  5/26/2016 9:28:48 AM 
How we can read Grid View column value in asp.net c# using jQuery? 

In this article I am going to show how we can read Grid View column value using jQuery. 

Open Visual Studio 2015 -> File-> New -> Web Site:


1.png

Image 1.

Now Add jQuery from ManageNuGet.

2.png

Image 2.

3.png

Image 3.

Now Add a new web form.

4.png

Image 4.

Below is my SQL Server Data Table:

CREATE TABLE [dbo].[Emp_Information](
          [EMP_ID] [int] IDENTITY(1,1) NOT NULL,
          [Name] [varchar](50) NULL,
          [ProjectName] [varchar](50) NULL,
          [ManagerName] [varchar](50) NULL,
          [City] [varchar](50) NULL,
          [Joining_Date] [datetime] NULL,
 CONSTRAINT [PK_Emp_Information] PRIMARY KEY CLUSTERED
(
          [EMP_ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
 
GO
SET ANSI_PADDING OFF
GO

 

 

5.png

Image 5.

Data in my Table:

6.png

Image 6.

Now come to your Visual Studio Application. Do below aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>jQuery: Read Grid View Column Value</title>
    <script src="Scripts/jquery-2.2.3.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#dvColumnVal").empty();
            var colVAL = "";
            $("#btnGet").click(function () {
                var ddlSelectedCol = $("#ddlColumn").val();
                $("#<%=GridViewEmployee.ClientID %> tr").each(function () {
                    if (!this.rowIndex) return;
                    var currVAL = $(this).find("td:eq('" + ddlSelectedCol + "')").html();
                    colVAL += currVAL + ", ";
                });
                $("#dvColumnVal").html(colVAL);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <table style="border: 25px solid red; width: 100%; background-color: skyblue;">
            <tr>
                <td align="center" style="height: 30px; background-color: coral; font-size: 15pt; font-weight: bold; color: white;">
                        jQuery: Read Grid View Any Column Value</td>
            </tr>
            <tr>
                <td>
                    <asp:GridView ID="GridViewEmployee" runat="server" Width="100%">
                    </asp:GridView>
                </td>
            </tr>
            <tr>
                <td height="10px"></td>
            </tr>
            <tr>
                <td style="height: 30px; background-color: coral; font-size: 15pt; font-weight: bold; color: green;">
                                   Select Column Name to get Value
                    <asp:DropDownList ID="ddlColumn" runat="server">
                        <asp:ListItem Text="EMP_ID" Value="0"></asp:ListItem>
                        <asp:ListItem Text="Name" Value="1"></asp:ListItem>
                        <asp:ListItem Text="Project Name" Value="2"></asp:ListItem>
                        <asp:ListItem Text="Manager Name" Value="3"></asp:ListItem>
                        <asp:ListItem Text="City" Value="4"></asp:ListItem>
                        <asp:ListItem Text="Joining Date" Value="5"></asp:ListItem>
                    </asp:DropDownList>
                    <input type="button" id="btnGet" value="Get Value" />
                </td>
            </tr>
            <tr>
                <td height="10px"></td>
            </tr>
            <tr>
                <td>
                    <div id="dvColumnVal" class="aDiv">
                    </div>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
 

aspx.cs code is:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindEmployeeData();
        }
    }
 
    public void BindEmployeeData()
    {
        DataSet ds = new DataSet();
        using (SqlConnection con = new SqlConnection("Data Source=.;Integrated Security=true;Initial Catalog=CompanyDB"))
        {
            con.Open();
            SqlCommand cmd = new SqlCommand("select * from Emp_Information", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            con.Close();
            GridViewEmployee.DataSource = ds;
            GridViewEmployee.DataBind();
        }
    }
}

Now Run your application:

7.png

Image 7.

Select column from drop down list:

8.png

Image 8.

9.png

Image 9.

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