Post
Ask Question

JQuery: Read GridView Column Value

Open Visual Studio 2015 -> File-> New -> Web Site.
new

Now Add jQuery from ManageNuget.

add

add

Now Add a new web form.

add

Below is my SQL Server Data Table.

  1. CREATE TABLE [dbo].[Emp_Information](  
  2.     [EMP_ID] [int] IDENTITY(1,1) NOT NULL,  
  3.     [Name] [varchar](50) NULL,  
  4.     [ProjectName] [varchar](50) NULL,  
  5.     [ManagerName] [varchar](50) NULL,  
  6.     [City] [varchar](50) NULL,  
  7.     [Joining_Date] [datetime] NULL,  
  8.  CONSTRAINT [PK_Emp_Information] PRIMARY KEY CLUSTERED   
  9. (  
  10.     [EMP_ID] ASC  
  11. )WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,   
  12. IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]  
  13. ) ON [PRIMARY]  
  14.   
  15. GO  
  16.   
  17. SET ANSI_PADDING OFF  
  18. GO  
code

Data in my Table

table

Now come to your Visual Studio Application. Do below aspx code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title>jQuery: Read Grid View Column Value</title>  
  6.     <script src="Scripts/jquery-2.2.3.min.js"></script>  
  7.     <script type="text/javascript">  
  8.         $(document).ready(function () {  
  9.             $("#dvColumnVal").empty();  
  10.             var colVAL = "";  
  11.             $("#btnGet").click(function () {  
  12.                 var ddlSelectedCol = $("#ddlColumn").val();  
  13.                 $("#<%=GridViewEmployee.ClientID %> tr").each(function () {  
  14.                     if (!this.rowIndex) return;  
  15.                     var currVAL = $(this).find("td:eq('" + ddlSelectedCol + "')").html();  
  16.                     colVAL += currVAL + ", ";  
  17.                 });  
  18.                 $("#dvColumnVal").html(colVAL);  
  19.             });  
  20.         });  
  21.     </script>  
  22. </head>  
  23. <body>  
  24.     <form id="form1" runat="server">  
  25.         <table style="border: 25px solid red; width: 100%; background-color: skyblue;">  
  26.             <tr>  
  27.                 <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>  
  28.             </tr>  
  29.             <tr>  
  30.                 <td>  
  31.                     <asp:GridView ID="GridViewEmployee" runat="server" Width="100%">  
  32.                     </asp:GridView>  
  33.                 </td>  
  34.             </tr>  
  35.             <tr>  
  36.                 <td height="10px"></td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td style="height: 30px; background-color: coral; font-size: 15pt; font-weight: bold; color: green;">Select Column Name to get Value  
  40.                     <asp:DropDownList ID="ddlColumn" runat="server">  
  41.                         <asp:ListItem Text="EMP_ID" Value="0"></asp:ListItem>  
  42.                         <asp:ListItem Text="Name" Value="1"></asp:ListItem>  
  43.                         <asp:ListItem Text="Project Name" Value="2"></asp:ListItem>  
  44.                         <asp:ListItem Text="Manager Name" Value="3"></asp:ListItem>  
  45.                         <asp:ListItem Text="City" Value="4"></asp:ListItem>  
  46.                         <asp:ListItem Text="Joining Date" Value="5"></asp:ListItem>  
  47.                     </asp:DropDownList>  
  48.                     <input type="button" id="btnGet" value="Get Value" />  
  49.                 </td>  
  50.             </tr>  
  51.             <tr>  
  52.                 <td height="10px"></td>  
  53.             </tr>  
  54.             <tr>  
  55.                 <td>  
  56.                     <div id="dvColumnVal" class="aDiv">  
  57.                     </div>  
  58.                 </td>  
  59.             </tr>  
  60.         </table>  
  61.     </form>  
  62. </body>  
  63. </html>  
Aspx.cs code
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Data;  
  4. using System.Data.SqlClient;  
  5. using System.Linq;  
  6. using System.Web;  
  7. using System.Web.UI;  
  8. using System.Web.UI.WebControls;  
  9.   
  10. public partial class _Default : System.Web.UI.Page  
  11. {  
  12.     protected void Page_Load(object sender, EventArgs e)  
  13.     {  
  14.         if (!Page.IsPostBack)  
  15.         {  
  16.             BindEmployeeData();  
  17.         }  
  18.     }  
  19.   
  20.     public void BindEmployeeData()  
  21.     {  
  22.         DataSet ds = new DataSet();  
  23.         using (SqlConnection con = new SqlConnection("Data Source=.;Integrated Security=true;Initial Catalog=CompanyDB"))  
  24.         {  
  25.             con.Open();  
  26.             SqlCommand cmd = new SqlCommand("select * from Emp_Information", con);  
  27.             SqlDataAdapter da = new SqlDataAdapter(cmd);  
  28.             da.Fill(ds);  
  29.             con.Close();  
  30.             GridViewEmployee.DataSource = ds;  
  31.             GridViewEmployee.DataBind();  
  32.         }  
  33.     }  
  34. }  
Now Run your application.
application

Select column from drop down list

application

application
Next Recommended Reading Gridview Checkbox Check And Uncheck Using jQuery In ASP.NET