Fetch value of GridView cell ASP.NET using JQuery

Learn how to fetch data from a GridView cell using JQuery and display with some other realted informations in Visual Studio 2010.
  • 4062
Read this tutorial to learn how to fetch data from a GridView cell using JQuery. Take a quick review and see how to get data from a GridView cell and display with some other informations.

Here the ObjectDataSource uses the Detail.vb class where we store some information about employee, lets see the code behind Detail.vb:

Imports System
Imports System.Collections.Generic
Public Class Employee
  Public Property ID() As Integer
  Public Property FName() As String
  Public Property MName() As String
  Public Property LName() As String
  Public Property DateOfJoin() As Date
  Public Property Sex() As Char
  Public Function GetEmployeeList() As List(Of Employee)
    Dim empList As New List(Of Employee)()
    Return empList
  End Function 
  Public Property Salary() As Char
  Public Property MS() As Char
End Class

Design View

Here we store data of 10 employees in the grid as their Id, Name, Date of joining and Marital status. You can also change the formatting of grid from gridview task as show above.

Use the following function to retrieve a cell from gridview in default.aspx page.

$(function () {
   $(".gv > tbody > tr:not(:has(table, th))")
      .css("cursor", "pointer")
      .click(function (e) {
         $(".gv td").removeClass("highlite");
         var $cell = $(e.target).closest("td");
         var $currentCellText = $cell.text();
         var $leftCellText = $cell.prev().text();
         var $rightCellText = $cell.next().text();
         var $colIndex = $cell.parent().children().index($cell);
         var $colName = $cell.closest("table")
            .find('th:eq(' + $colIndex + ')').text();
            .append("<b>Text of Current Cell: </b>"
               + $currentCellText + "<br/>")
            .append("<b>Text to Left of Clicked Cell: </b>"
               + $leftCellText + "<br/>")
            .append("<b>Text to Right of Clicked Cell: </b>"
               + $rightCellText + "<br/>")
            .append("<b>Column Name of Clicked Cell: </b>"
               + $colName)



Now click a cell of the gridview, and see the result as shown below: 


Download the complete source code of the article from top.


More Articles

© 2020 DotNetHeaven. All rights reserved.