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.