Change ASP.Net Gridview Row Color on Mouseover

Sometimes we may need this due to requirements, the ability to change a row's color on mouse over and mouse out in ASP.Net projects. See the following simple sample of changing the grid view row color.

Run the project.



Then click any row index to see its details.



First of all you need to create an "ASP.NET Empty Web Site". Then use the following procedure.

Step 1: Create an EmployeeRecord class in the App_Code folder and provide the following:

using System.Data;

public class EmployeeRecord
{
   public DataTable EmpRecord()
   {
      DataTable dt = new DataTable();
      dt.Columns.Add("Emp_Name");
      dt.Columns.Add("Emp_id");
      dt.Columns.Add("Emp_job");
      dt.Columns.Add("Emp_Dep");
      DataRow rw1 = dt.NewRow();
      rw1["Emp_Name"] = "Arvid Gaur";
      rw1["Emp_id"] = "00011";
      rw1["Emp_job"] = "Software Engineer";
      rw1["Emp_Dep"] = "IT";
      dt.Rows.Add(rw1);
      DataRow rw2 = dt.NewRow();
      rw2["Emp_Name"] = "Dharmender kumar";
      rw2["Emp_id"] = "00024";rw2["Emp_job"] = "System Engineer";
      rw2["Emp_Dep"] = "IT";
      dt.Rows.Add(rw2);
      DataRow rw3 = dt.NewRow();
      rw3["Emp_Name"] = "Ravi kumar";
      rw3["Emp_id"] = "00138";
      rw3["Emp_job"] = "Support Enginner";
      rw3["Emp_Dep"] = "IT";
      dt.Rows.Add(rw3);
      DataRow rw4 = dt.NewRow();
      rw4["Emp_Name"] = "Arvind Kumar";
      rw4["Emp_id"] = "00058";
      rw4["Emp_job"] = "Sr Software Engineer";
      rw4["Emp_Dep"] = "IT";
      dt.Rows.Add(rw4);
      DataRow rw5 = dt.NewRow();
      rw5["Emp_Name"] = "Rajan Sharma";
      rw5["Emp_id"] = "00085";
      rw5["Emp_job"] = "Test Engineer";
      rw5["Emp_Dep"] = "IT";
      dt.Rows.Add(rw5);
      return dt;
   }
}

Step 2: Insert the grid view control intp the Default.aspx page then write the following design code:

<asp:GridView ID="ui_grdVw_EmployeeDetail" runat="server" Width="50%" AutoGenerateColumns="false"              HeaderStyle-CssClass="pageheading" OnRowDataBound="ui_grdVw_EmployeeDetail_RowDataBound" OnSelectedIndexChanged="ui_grdVw_EmployeeDetail_SelectedIndexChanged">
<Columns>
   <asp:TemplateField HeaderText="S.NO">
   <ItemTemplate>
       <%#Container.DataItemIndex+1 %>
   </ItemTemplate>
   </asp:TemplateField>

   <asp:TemplateField HeaderText="Employee ID">
   <ItemTemplate>
      <asp:Label ID="ui_lbl_EmployeeID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_id") %>'></asp:Label>
   </ItemTemplate>
   </asp:TemplateField>

   <asp:TemplateField HeaderText="Employee Name">
   <ItemTemplate>
      <asp:Label ID="ui_lbl_EmployeeName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_Name") %>'></asp:Label>
   </ItemTemplate>
   </asp:TemplateField>

   <asp:TemplateField HeaderText="Employee Post">
   <ItemTemplate>
      <asp:Label ID="ui_lbl_EmpJob" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_job") %>'></asp:Label>
   </ItemTemplate>
   </asp:TemplateField>

   <asp:TemplateField HeaderText="Department">
   <ItemTemplate>
      <asp:Label ID="ui_lbl_Department" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Emp_Dep") %>'></asp:Label>
   </ItemTemplate>
   </asp:TemplateField>
</Columns>
</asp:GridView>
<asp:LinkButton ID="ui_lnkbtn_Dummy" runat="server"></asp:LinkButton>

Step 3: Now, open the Default.aspx.cs then write the following code:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
   protected void Page_Load(object sender, EventArgs e)
   {
      if (!IsPostBack)
      {
         ui_grdvw_EmployeeDetail_Bind();
      }
   }

   protected void ui_grdvw_EmployeeDetail_Bind()
   {
      DataTable dt = new DataTable();
      EmployeeRecord employeeRecord = new EmployeeRecord();
      dt = employeeRecord.EmpRecord();
      ui_grdVw_EmployeeDetail.DataSource = dt;
      ui_grdVw_EmployeeDetail.DataBind();
   }

   protected void ui_grdVw_EmployeeDetail_RowDataBound(object sender, GridViewRowEventArgs e)
   {
      if (e.Row.RowType == DataControlRowType.DataRow)
      {
         e.Row.Attributes.Add("onmouseover",
               this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#0071b6';this.styl               e.color='White'");
         e.Row.Attributes.Add("onmouseout",                     "this.style.backgroundColor=this.originalstyle;this.style.color=this.originalstyle;");
         e.Row.Attributes["onclick"] =          Page.ClientScript.GetPostBackClientHyperlink(ui_grdVw_EmployeeDetail, "Select$" + e.Row.RowIndex);
         e.Row.Attributes["style"] = "cursor:pointer";
      }
    }

    protected void ui_grdVw_EmployeeDetail_SelectedIndexChanged(object sender, EventArgs e)
    {
         Label Emp_id = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmployeeID");
         Label Emp_Name = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmployeeName");
         Label Emp_job = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_EmpJob");
         Label Emp_Dep = (Label)ui_grdVw_EmployeeDetail.SelectedRow.FindControl("ui_lbl_Department");
         StringBuilder alartMsg = new StringBuilder();
         alartMsg.Append("You are Selected:-\\n");
         alartMsg.Append("ID : " + Emp_id.Text+"\\nName : "+Emp_Name.Text+"\\nPost :                           "+Emp_job.Text+"\\nDepartment : "+Emp_Dep.Text);
          ScriptManager.RegisterStartupScript(this, this.GetType(),           "scriptName","alert('"+alartMsg.ToString()+"');", true);
    }
}

In the preceding code, I'm changing the row color on mouse over and doing the same to re-assign the old background color upon mouse out and a click to show the details in an alert.

I have attached the sample project for this, download and see how it works. Thank you for reading and I hope you enjoyed this blog.