Get the Clicked Cell Value and Column Name of GridView in ASP.NET

Normally we find the requirement to get the selected Cell Clicked Value .In rare cases we need to find the Column Name and Index of the Cell clicked in the GridView.

This is some how tricky work to get the Column name and index also.We can do this in many ways .

We must be very much thankful to the jQuery contributors for such beautiful lightweight,fast and concise Library.

Really this is very good  we can't iterate the table loop to the clicked cell value.
With a Single we can get the clicked Value.Look at this line of Code
$('#gv>tbody>tr>td').text();

For this requirement I have taken a grid which i have given a static datasource.

  protected void Page_Load(object sender, EventArgs e)  
     {  
       if (!IsPostBack)  
       {  
         AddData();  
       }  
     }  
     public void AddData()  
     {  
       try  
       {  
         DataTable dt = new DataTable();  
         dt.Columns.Add("ID", typeof(Int32));  
         dt.Columns.Add("Name", typeof(String));  
         dt.Columns.Add("Salary", typeof(Decimal));  
         dt.Columns.Add("Place", typeof(String));  
         DataRow dr = dt.NewRow();  
         dr["ID"] = 1;  
         dr["Name"] = "Varun";  
         dr["Salary"] = 15.06;  
         dr["Place"] = "GUNTUR";  
         dt.Rows.Add(dr);  
         dr = null;  
         dr = dt.NewRow();  
         dr["ID"] = 2;  
         dr["Name"] = "Sainath";  
         dr["Salary"] = 34545;  
         dr["Place"] = "VIJAYAWADA";  
         dt.Rows.Add(dr);  
         dr = null;  
         dr = dt.NewRow();  
         dr["ID"] = 3;  
         dr["Name"] = "Mohan";  
         dr["Salary"] = 4005;  
         dr["Place"] = "ELURU";  
         dt.Rows.Add(dr);  
         dr = null;  
         dr = dt.NewRow();  
         dr["ID"] = 4;  
         dr["Name"] = "Rohit";  
         dr["Salary"] = 34545;  
         dr["Place"] = "KAKINADA";  
         dt.Rows.Add(dr);  
         gv.DataSource = dt;  
         gv.DataBind();  
       }  
       catch (Exception ex)  
       {  
         throw ex;  
       }  
     }  

To Do task with  jQuery we need to add the jQuery Supporting file.You can download the updated one from here --->  http://jquery.com/




Using the below Script we can get the Clicked Text ,Column Name and Index too.
 

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.js"></script>  
   <script type="text/javascript">  
     $(document).ready(function () {  
       $('#gv>tbody>tr>td').dblclick(function () {  
         var col = $(this).parent().children().index($(this));  
         var title = $(this).closest("table").find("th").eq(col).text();  
         $('p').html("Cell Clicked Text ---> " + $(this).text() + "<br/>" + "Column Name  ---> " + title + "<br/>" + " Column Index ---> " + col + "<br/>");  
         $('p').css('border-style', 'dotted');  
         $('p').css('border-color', 'purple');  
       });  
     });  
   </script>  

  
By doing this we can get the Clicked Cell Text,Column Name and Column Index in asp.net using jQuery.
The Screen Shot is given below

Any suggestion on this are welcome :-)