Post
Ask Question

Get GridView Row Data On Row Click Using jQuery

Here, I have described the following jQuery methods like click() and text() and how to find Id of controls.

Initial chamber

Step 1: Open Visual Studio and create an empty website, provide a suitable name such as RowDataUsingJqueryInGridView.

Step 2: In Solution Explorer you get your empty website, then add web forms.

For Web Form

RowDataUsingJqueryInGridView (your empty website). Right-click and select Add New Item, then Web Form. Name it RowDataUsingJqueryInGridView.aspx.

Design chamber

Step 3: Open the RowDataUsingJqueryInGridView.aspx file and write some code for the design of the application.

Firstly, add some CSS on this page which is used on page in header section as in the following code snippet:

  1. <style type="text/css">  
  2.     table tbody tr:hover {  
  3.         background-color: red;  
  4.         cursor: pointer;  
  5.     }  
  6. </style>  
Then add jQuery plugin in your head section. Here I have used jquery-1.10.2.js plugin for demonstration purpose.

Add in your page-
  1. <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
In head section of the web page.

Add HTML on your page and your page looks like the following:
  1. <form id="form1" runat="server">  
  2.     <div>  
  3.         <table id="tstTable" class="tbl">  
  4.             <caption>Change History Table</caption>  
  5.   
  6.             <thead>  
  7.                 <tr>  
  8.                     <th>Change Date</th>  
  9.                     <th>Change Type</th>  
  10.                     <th>Description</th>  
  11.                     <th>StaffID</th>  
  12.                 </tr>  
  13.             </thead>  
  14.   
  15.             <tbody>  
  16.                 <tr>  
  17.                     <td>16/04/2010 07:30</td>  
  18.                     <td>Edit</td>  
  19.                     <td>New role</td>  
  20.                     <td>00215</td>  
  21.                 </tr>  
  22.                 <tr>  
  23.                     <td>15/02/2012 14:37</td>  
  24.                     <td>Edit</td>  
  25.                     <td>Out of stock</td>  
  26.                     <td>85407</td>  
  27.                 </tr>  
  28.                 <tr>  
  29.                     <td>14/03/2013 10:18</td>  
  30.                     <td>Add</td>  
  31.                     <td>Out of date</td>  
  32.                     <td>15708</td>  
  33.                 </tr>  
  34.                 <tr>  
  35.                     <td>17/03/2013 10:18</td>  
  36.                     <td>Add</td>  
  37.                     <td>Expire</td>  
  38.                     <td>15648</td>  
  39.                 </tr>  
  40.                 <tr>  
  41.                     <td>14/06/2013 10:18</td>  
  42.                     <td>Add</td>  
  43.                     <td>Out of date</td>  
  44.                     <td>15948</td>  
  45.                 </tr>  
  46.                 <tr>  
  47.                     <td>14/03/2013 10:18</td>  
  48.                     <td>Add</td>  
  49.                     <td>Out of date</td>  
  50.                     <td>16748</td>  
  51.                 </tr>  
  52.             </tbody>  
  53.         </table>  
  54.     </div>  
  55.   
  56. </form>  
Now design looks like the following:

design
                                          Figure 1

Now write some script for jQuery for our purpose.

JQuery code to execute the purpose:
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $('table tbody tr').click(function () {  
  4.             alert($(this).text());  
  5.               
  6.         });  
  7.     });  
  8.      
  9. </script>  
Now your page looks like the following screenshot:

RowDataUsingJqueryInGridView.aspx
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RowDataUsingJqueryInGridView.aspx.cs" Inherits="BindImageDropdown" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <title>C-sharp corner article by Upendra Pratap Shahi</title>  
  8.     <style type="text/css">  
  9.         table tbody tr:hover {  
  10.             background-color: red;  
  11.             cursor: pointer;  
  12.         }  
  13.     </style>  
  14.     <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  15.     <script type="text/javascript">  
  16.         $(document).ready(function () {  
  17.             $('table tbody tr').click(function () {  
  18.                 alert($(this).text());  
  19.                   
  20.             });  
  21.         });  
  22.           
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <form id="form1" runat="server">  
  27.         <div>  
  28.             <table id="tstTable" class="tbl">  
  29.                 <caption>Change History Table</caption>  
  30.   
  31.                 <thead>  
  32.                     <tr>  
  33.                         <th>Change Date</th>  
  34.                         <th>Change Type</th>  
  35.                         <th>Description</th>  
  36.                         <th>StaffID</th>  
  37.                     </tr>  
  38.                 </thead>  
  39.   
  40.                 <tbody>  
  41.                     <tr>  
  42.                         <td>16/04/2010 07:30</td>  
  43.                         <td>Edit</td>  
  44.                         <td>New role</td>  
  45.                         <td>00215</td>  
  46.                     </tr>  
  47.                     <tr>  
  48.                         <td>15/02/2012 14:37</td>  
  49.                         <td>Edit</td>  
  50.                         <td>Out of stock</td>  
  51.                         <td>85407</td>  
  52.                     </tr>  
  53.                     <tr>  
  54.                         <td>14/03/2013 10:18</td>  
  55.                         <td>Add</td>  
  56.                         <td>Out of date</td>  
  57.                         <td>15708</td>  
  58.                     </tr>  
  59.                     <tr>  
  60.                         <td>17/03/2013 10:18</td>  
  61.                         <td>Add</td>  
  62.                         <td>Expire</td>  
  63.                         <td>15648</td>  
  64.                     </tr>  
  65.                     <tr>  
  66.                         <td>14/06/2013 10:18</td>  
  67.                         <td>Add</td>  
  68.                         <td>Out of date</td>  
  69.                         <td>15948</td>  
  70.                     </tr>  
  71.                     <tr>  
  72.                         <td>14/03/2013 10:18</td>  
  73.                         <td>Add</td>  
  74.                         <td>Out of date</td>  
  75.                         <td>16748</td>  
  76.                     </tr>  
  77.                 </tbody>  
  78.             </table>  
  79.         </div>  
  80.   
  81.     </form>  
  82. </body>  
  83. </html>  
On code behind page

No need to write any code here because I’ve displayed all the things from the front end.
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. public partial class BindImageDropdown : System.Web.UI.Page  
  9. {  
  10.    protected void Page_Load(object sender, EventArgs e)  
  11.    {  
  12.   
  13.    }  
  14.   
  15. }  
Output

run
                                                                  Figure 2

Output
                                                                           Figure 3

I hope you liked this. Have a good day. Thank you for reading.


Similar Articles