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

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads