Select GridView Row Without Postback OnClick Of Cell JavaScript

This Example explains how to Select GridView Row On Click Of Cell Programmatically Without Postback Using JavaScript In Asp.Net.

We can make cells clickable by adding OnClick attribute in ClientScript.

Place ScriptManager And UpdatePanel on the page and add Gridview inside ContentTemaplatefor partial postbacks, Populate it using SqlDataSource.


HTML SOURCE OF GRIDVIEW

---

   1:  <asp:ScriptManager ID="ScriptManager1" runat="server"/>

   2:  <asp:UpdatePanel ID="UpdatePanel1" runat="server">

   3:  <ContentTemplate>

   4:   

   5:  <asp:GridView ID="GridView1" runat="server" 

   6:                AutoGenerateColumns="False" 

   7:                DataKeyNames="EmployeeID" 

   8:                DataSourceID="SqlDataSource1" 

   9:                onrowdatabound="GridView1_RowDataBound" 

  10:                AllowPaging="True"    

  11:                onpageindexchanging="GridView1_PageIndexChanging">

  12:  <Columns>

  13:  <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID"/>

  14:  <asp:BoundField DataField="FirstName" HeaderText="FirstName"/>

  15:  <asp:BoundField DataField="City" HeaderText="City"/>

  16:  <asp:BoundField DataField="Country" HeaderText="Country"/>

  17:  </Columns>

  18:  </asp:GridView>

  19:   

  20:  <asp:SqlDataSource ID="SqlDataSource1" runat="server" 

  21:  ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 

  22:  SelectCommand="SELECT [EmployeeID], [FirstName], [City], 

  23:                [Country] FROM [Employees]">

  24:  </asp:SqlDataSource>

  25:  </ContentTemplate>

  26:  </asp:UpdatePanel>

Write code mentioned below in RowDataBound Event.

C#

---

01protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

02    {

03        if (e.Row.RowType == DataControlRowType.DataRow)

04        {

05            e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';";

06            e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";

07 

08            e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.GridView1, "Select$" + e.Row.RowIndex);

09        }

10    }

11 

12protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)

13    {

14        GridView1.SelectedIndex = -1;

15    }

VB.NET

---

01Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs)

02 If e.Row.RowType = DataControlRowType.DataRow Then

03  e.Row.Attributes("onmouseover") = "this.style.cursor='hand';"

04  e.Row.Attributes("onmouseout") = "this.style.textDecoration='none';"

05 

06  e.Row.Attributes("onclick") = ClientScript.GetPostBackClientHyperlink(Me.GridView1, "Select$" & Convert.ToString(e.Row.RowIndex))

07 End If

08End Sub

09 

10Protected Sub GridView1_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)

11 GridView1.SelectedIndex = -1

12End Sub

While running this code we get EventValidation error.

Invalid postback or callback argument. Event validation is enabled using 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.

We can fix this by setting EnableEventValidation="false" in page directive but it will be a security risk, so there are other ways to handle this.

Method 1.

---

Add this style in head section of page

   1:  <style>

   2:  .visibility {Display : none}

   3:  </style>

Now add ShowSelectButton Commandfield column in gridview source and set it's css propertyto style we added in head. this will hide the select button.

   1:  <asp:CommandField ShowSelectButton="True" 

   2:                    ItemStyle-CssClass="visibility"/>

Method 2.

---

Remove the code from RowDataBound Event of GridView and OverRide Render event of page, set the last parameter (bool registerForEventValidation) of ClientScript to true.

C#

---

01protected override void Render(System.Web.UI.HtmlTextWriter textWriter)

02    {

03        foreach (GridViewRow gvRow in GridView1.Rows)

04        {

05            if (gvRow.RowType == DataControlRowType.DataRow)

06            {

07                gvRow.Attributes["onmouseover"] =

08                   "this.style.cursor='hand';";

09                gvRow.Attributes["onmouseout"] =

10                   "this.style.textDecoration='none';";

11                gvRow.Attributes["onclick"] =

12                 ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + gvRow.RowIndex, true);

13            }

14        }

15        base.Render(textWriter);

16    }

VB

---

01Protected Overrides Sub Render(textWriter As System.Web.UI.HtmlTextWriter)

02 For Each gvRow As GridViewRow In GridView1.Rows

03  If gvRow.RowType = DataControlRowType.DataRow Then

04   gvRow.Attributes("onmouseover") = "this.style.cursor='hand';"

05   gvRow.Attributes("onmouseout") = "this.style.textDecoration='none';"

06   gvRow.Attributes("onclick") = ClientScript.GetPostBackClientHyperlink(GridView1, "Select$" + gvRow.RowIndex, True)

07  End If

08 Next

09 MyBase.Render(textWriter)

10End Sub