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:
Image 1.
Now Add jQuery from ManageNuGet.
Image 2.
Image 3.
Now Add a new web form.
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
Image 5.
Data
in my Table:
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:
Image 7.
Select column from drop down list:
Image 8.
Image 9.