In this article I will explain with an example, how to get the GridView Row and its RowIndex on Client Side when the GridView Row is selected using jQuery.
When the Select LinkButton is clicked, a jQuery Click event handler will be called and using the reference of the Selected Row, the values will be fetched and displayed using JavaScript Alert Message Box.
This article will also explain how to read values from the Cells and TextBoxes present in the GridView Row using jQuery.
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 ASP.Net GridView Row and its RowIndex when clicked 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
![jQuery: Get ASP.Net GridView Row and its RowIndex when clicked]()
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
