Select GridView Row OnClick Of Cell Without Postback Using JavaScript

1:39:00 am 0 Comments

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 ContentTemaplate for 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 property to 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

Select GridView Row On Cell Click

Hope this helps.

Unknown

0 comments:

Subscribe to: Post Comments (Atom)