Get ASPNet GridView Row and its RowIndex when clicked using JavaScript

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 JavaScript.

When the Select LinkButton is clicked, a JavaScript function 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 JavaScript.

HTML Markup

The HTML Markup consists of an ASP.Net GridView with two BoundField columns and two TemplateField columns.

The LinkButton has been assigned an OnClientClick event handler which calls the GetSelectedRow JavaScript function.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<asp:BoundField DataField="Id" HeaderText="Customer Id" />

<asp:BoundField DataField="Name" HeaderText="Name" />

<asp:TemplateField HeaderText="Country">

<asp:TextBox ID="Country" runat="server" Text='<%# Eval("Country") %>'></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<asp:LinkButton ID="lnkSelect" runat="server" Text="Select" OnClientClick="return GetSelectedRow(this);" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

Namespaces

You will need to import the following namespace.

using System.Data;

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 JavaScript

When the LinkButton in a GridView Row is clicked, the following JavaScript function is called.

Using the reference of the clicked LinkButton, the GridView Row is referenced and the RowIndex is determined.

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.

function GetSelectedRow(lnk) {

//Reference the GridView Row.

var row = lnk.parentNode.parentNode;

//Determine the Row Index.

var message = "Row Index: " + (row.rowIndex - 1);

//Read values from Cells.

message += "\nCustomer Id: " + row.cells[0].innerHTML;

message += "\nName: " + row.cells[1].innerHTML;

//Reference the TextBox and read value.

message += "\nCountry: " + row.cells[2].getElementsByTagName("input")[0].value;

//Display the data using JavaScript Alert Message Box.