Get ASPNet GridView SelectedRow when clicked using JavaScript

In this article I will explain with an example, how to get GridView Row and its RowIndex Client-Side using JavaScript in ASP.Net.

This article will also explain how to find the Cells of selected GridView Row and also reference the controls inside the GridView TemplateField columns using JavaScript in ASP.Net.

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