In this article I will explain with an example, how to get selected Row (Cell) value in GridView using jQuery in ASP.Net.
When the Select LinkButton is clicked, the GridView Row is selected and a jQuery Click event handler is triggered.
Inside the jQuery Click event handler, the Cell values of the Selected Row are fetched and displayed using JavaScript Alert Message Box.
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two BoundField columns and two TemplateField columns.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Customer Id" />
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:TemplateField HeaderText="Country">
<ItemTemplate>
<asp:TextBox ID="Country" runat="server" Text='<%# Eval("Country") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelect" runat="server" Text="Select" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Namespaces
You will need to import the following namespace.
Binding the GridView
Inside the Page Load event, the GridView is populated with a dynamic DataTable with some dummy records.
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Get selected Row (Cell) value in GridView using jQuery
Inside the jQuery document ready event handler, a Click event handler is assigned to all the LinkButtons inside the GridView.
When the LinkButton in a GridView Row is clicked, the reference of the clicked LinkButton is determined.
Then the GridView Row is referenced and the RowIndex is determined and the values of the BoundField columns are read using the innerHTML property, while for TemplateField columns, the controls i.e. TextBoxes are referenced and then the values are read.
Finally, all the read values are displayed using JavaScript Alert Message Box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1]").find("[id*=lnkSelect]").click(function () {
//Reference the GridView Row.
var row = $(this).closest("tr");
//Determine the Row Index.
var message = "Row Index: " + (row[0].rowIndex - 1);
//Read values from Cells.
message += "\nCustomer Id: " + row.find("td").eq(0).html();
message += "\nName: " + row.find("td").eq(1).html();
//Reference the TextBox and read value.
message += "\nCountry: " + row.find("td").eq(2).find("input").eq(0).val();
//Display the data using JavaScript Alert Message Box.
alert(message);
return false;
});
});
</script>
Screenshot
![Get selected Row (Cell) value in GridView using jQuery in ASP.Net]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
