In this article I will explain how to add row click event to GridView row in ASP.Net or in other words attached onclick event handler to GridView Row in ASP.Net. We will use the OnSelectedIndexChanged event handler to handle the Row Click event. And in order to make the GridView Row Clickable we will attach the OnSelectedIndexChanged event handler to the GridView Row using the OnRowDataBound event handler.
You can also read some other interesting articles on GridView:-
HTML Markup
The HTML Markup consists of an ASP.Net GridView with two columns and a Dummy LinkButton. The Dummy LinkButton is used, so that the ASP.Net __doPostBack JavaScript function is rendered as we will require it for making the Row Clickable by raising PostBack.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound"
OnSelectedIndexChanged="OnSelectedIndexChanged">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
Namespaces
You will need to import the following namespaces
C#
VB.Net
Binding the GridView
The GridView is populated using some dummy records using DataTable.
C#
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();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(2) {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()
End If
End Sub
Attaching click event handler to GridView Row in ASP.Net
In the OnRowDataBound event handler, for each GridView Row a JavaScript click event handler is attached using the onclick attribute. The GetPostBackClientHyperlink method accepts the GridView instance as well as the command with the Row Index of the Row.
Note: GetPostBackClientHyperlink when rendered this gets converted to the JavaScript __doPostBack method that we were discussing earlier.
Doing the above makes each GridView Row clickable and also it executes the OnSelectedIndexChanged event handler (discussed below) when clicked.
C#
protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + e.Row.RowIndex);
e.Row.Attributes["style"] = "cursor:pointer";
}
}
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs)
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes("onclick") = Page.ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" & e.Row.RowIndex)
e.Row.Attributes("style") = "cursor:pointer"
End If
End Sub
OnSelectedIndexChanged event handler
Below is the OnSelectedIndexChanged event handler which will be triggered when the GridView Row is clicked.
Inside the event handler I am fetching the Clicked GridView Row’s RowIndex and also it’s Column Values
C#
protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
int index = GridView1.SelectedRow.RowIndex;
string name = GridView1.SelectedRow.Cells[0].Text;
string country = GridView1.SelectedRow.Cells[1].Text;
string message = "Row Index: " + index + "\\nName: " + name + "\\nCountry: " + country;
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('" + message + "');", true);
}
VB.Net
Protected Sub OnSelectedIndexChanged(sender As Object, e As EventArgs)
Dim index As Integer = GridView1.SelectedRow.RowIndex
Dim name As String = GridView1.SelectedRow.Cells(0).Text
Dim country As String = GridView1.SelectedRow.Cells(1).Text
Dim message As String = "Row Index: " & index & "\nName: " & name + "\nCountry: " & country
ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "alert('" + message + "');", True)
End Sub
![Add Row Click event to GridView Rows in ASP.Net]()
Handling the Event Validation Error
Since we are attaching the event directly to the GridView Row which by default does not have any OnClick event, you might land into the following error.
Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page. For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them. If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.
To resolve the above error you must set the property EnableEventValidation = "false"
in the @Page Directive as shown below
![Add Row Click event to GridView Rows in ASP.Net]()
Demo
Downloads
