In this article I will explain with an example, how to get the GridView Row and its RowIndex on Client Side when clicked using JavaScript in ASP.Net with C# and VB.Net.
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 following controls:
GridView – For displaying data.

Columns

The GridView consists of two BoundField columns and two TemplateField columns.
TemplateField – The TemplateField column consists of an ItemTemplate.
ItemTemplate – One ItemTemplate consists of a TextBox and another ItemTemplate consists of a LinkButton.
The LinkButton has been assigned with an OnClientClick event handler.
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false"> 
    <Columns>
        <asp:BoundField DataField="CustomerId" 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" OnClientClick="return GetSelectedRow(this);" /> 
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
 

Getting ASP.Net GridView and RowIndex when clicked using JavaScript

When the Select LinkButton is clicked, the GetSelectedRow JavaScript function is called.
Inside the GetSelectedRow JavaScript function, the GridView Row is referenced and the RowIndex is determined.
Then, the cell values i.e. TextBox values are read using the innerHTML property.
Finally, all the read values are displayed using JavaScript Alert Message Box and FALSE is returned.
<script type="text/javascript">
    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.
        alert(message);
        return false;
    }
</script>
 
 

Namespaces

You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 

Binding the GridView using C# and VB.Net

Inside the Page_Load event handler, the GridView is populated with dynamic DataTable.
Note: For more details on how to populate GridView with dynamic DataTable, please refer my article Dynamically create DataTable and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] {
                            new DataColumn("CustomerId"),
                            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");
        gvCustomers.DataSource = dt;
        gvCustomers.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim  dt As DataTable = New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {
                            New DataColumn("CustomerId"),
                            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")
        gvCustomers.DataSource = dt
        gvCustomers.DataBind()
    End If
End Sub
 
 

Screenshot

Get ASP.Net GridView Row and its RowIndex when clicked using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Demo

View Demo
 
 

Downloads

Download Code