Selecting GridView Row by clicking anywhere on the Row in Asp.Net - C#

In this blog I am going to how to show how to select GridView Row when mouse is clicked anywhere on the GridView Row in ASP.Net- C#

  •  First of all add a page to your solution and add a gridview, a link button which will be used to render ASP.Net _doPostBack JavaScript as it requires for RowSelection.
<head runat="server">
<style type="text/css">
        font-family: Arial;
        font-size: 10pt;
        cursor: pointer;
        background-color: #A1DCF2;
 <script type="text/javascript">
     $(function () {
         $("[id*=gvDetails] td").hover(function () {
             $("td", $(this).closest("tr")).addClass("hover_row");
         }, function () {
             $("td", $(this).closest("tr")).removeClass("hover_row");

<form id="form1" runat="server">
        <asp:GridView ID="gvDetails" HeaderStyle-BackColor="AliceBlue" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound" HeaderStyle-ForeColor="Black" runat="server"
        <asp:BoundField DataField="UserId" HeaderText="User Id" ItemStyle-Width="50" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:BoundField DataField="Designation" HeaderText="Designation" ItemStyle-Width="200" />
        <asp:BoundField DataField="Department" HeaderText="Department" ItemStyle-Width="150" />
        <asp:TemplateField ItemStyle-Width="20px">
            <asp:Image ID="Image1" Height="20px" Width="20px" Visible="false" runat="server" ImageUrl="~/images/btnyes.jpg" />
    <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>

  • Now add the following code in your code window ::

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Drawing;

public partial class SelectingGridRow : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)

    private void BindData()
        gvDetails.DataSource = this.getData();

    private DataTable getData()
        if (ViewState["Details"] != null)
            return (DataTable)ViewState["Details"];

        DataTable dt = new DataTable();
        dt.Columns.Add("UserId", typeof(Int32));
        dt.Columns.Add("Name", typeof(string));
        dt.Columns.Add("Designation", typeof(string));
        dt.Columns.Add("Department", typeof(string));

        DataRow dr = dt.NewRow();
        dr["UserId"] = 101;
        dr["Name"] = "Zaheer";
        dr["Designation"] = "Associate Technical Consultant";
        dr["Department"] = ".Net";

        dr = dt.NewRow();
        dr["UserId"] = 12;
        dr["Name"] = "Anish";
        dr["Designation"] = "Technical Consultant";
        dr["Department"] = "CRM";

        dr = dt.NewRow();
        dr["UserId"] = 113;
        dr["Name"] = "Manish";
        dr["Designation"] = "Navision Consultant";
        dr["Department"] = "Navision";

        dr = dt.NewRow();
        dr["UserId"] = 4;
        dr["Name"] = "Ravish";
        dr["Designation"] = "Tech Lead";
        dr["Department"] = "CRM";

        ViewState["Details"] = dt;
        return dt;

// On clicking any row i am changing the back color and showing a Tick mark in a column

    protected void SelectedIndexChanged(object sender, EventArgs e)
        foreach (GridViewRow row in gvDetails.Rows)
            if (row.RowIndex == gvDetails.SelectedIndex)
                //Response.Write("<script>alert('You have selected a row');</script>");
                System.Web.UI.WebControls.Image img = ((System.Web.UI.WebControls.Image)row.FindControl("Image1"));
                img.Visible = true;
                row.BackColor = ColorTranslator.FromHtml("#A1DCF2");
                row.ToolTip = string.Empty;
                System.Web.UI.WebControls.Image img = ((System.Web.UI.WebControls.Image)row.FindControl("Image1"));
                img.Visible = false;
                row.BackColor = ColorTranslator.FromHtml("#FFFFFF");
                row.ToolTip = "Click to select row";

// A JavaScript click event handler is attached to each row using "onclick" attribute. The "GetPostBackClientHyperlink" method accepts the Gridview instance as well as the command RowIndex of the row
// When "GetPostBackClientHyperlink"rendered this gets converted to the JavaScript __doPostBack method.

    protected void OnRowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e)
        if (e.Row.RowType==DataControlRowType.DataRow)
            e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(gvDetails, "Select$" + e.Row.RowIndex);
            e.Row.ToolTip = "Click to select row";

Note: Set the EnableEventValidation to "False" in @PageDirective.


Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

How to import CSV files into DataTable in C#

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

go to top image