Introduction

In this post I will explain how to highlight gridview row color using javascript and CSS. My previous post Email id validation using javascript in Asp.net.Gridview in asp.Net c#.

Explanation

Asp.Net Gridview control is an adjustable and adaptable control which is used to show bulk information on a column and row basis.As we all know Gridview control will rendered as a table. Even though gridview control is having many features but it has missed some client based attractive things like highlighting gridview control row color. But we can achieve highlighting row in gridview using the below given code. Highlighting a Asp.Net gridview control row is more than just to make it looks good. It serves to distinguish and concentrate on a specific row, since the Gridview shows numerous lines of information at once.
So as to change gridview row color we have to include css style to that particular row by utilizing Javascript onmouseover and onmouseout properties. We can do it on Rowcreated/Rowdatabound Asp.Net gridview events.

Using CSS to achive highlight gridview row color

Stylesheet class

<style type="text/css">

      .gvRowhighlightColor
      {
          background-color:#ccccc1;
      }
      .gvRowDefaultColor
      {
          background-color:#FFFFFF;
      }
   </style>

OnRowCreated sample

We are going to add a gridview control for candidate master.Use gridview background color as white which will be easier while reverting the highlighted color.

Design

<asp:GridView ID="gvCandidate" runat="server" AutoGenerateColumns="false" Width="90%"
                      OnRowCreated="gvCandidate_RowCreated" CellPadding="5" CellSpacing="0">
         <HeaderStyle BackColor="#333" ForeColor="#FFFFFF" />
         <RowStyle Font-Names="Tahoma" />
         <Columns>
         <asp:BoundField DataField="cnCandidateCode" HeaderText="CandidateCode" />
         <asp:BoundField DataField="cnName" HeaderText="CandidateName" />
         <asp:BoundField DataField="cnQualification" HeaderText="Qualification" />
         <asp:BoundField DataField="cnContactNumber" HeaderText="ContactNumber" />
         <asp:BoundField DataField="cnAddress" HeaderText="Address" />       
         </Columns>
        </asp:GridView>

Code behind we have to add the code in gridview event OnRowCreated. The thing we have to digest here is this code will loop for all the rows in the gridview rows.

protected void gvCandidate_RowCreated(object sender, GridViewRowEventArgs e)
{
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // onmouseover we will assign the highlighting color css
            e.Row.Attributes.Add("onmouseover", "this.className='gvRowhighlightColor;';");
            // onmouseout we will revert to default color css. 
            e.Row.Attributes.Add("onmouseout", "this.className='gvRowDefaultColor';");
        }
}

(or)

OnRowDataBound sample

As mentioned above code will do the same. we have to use any one to achive the highlight gridview row.

Design

<asp:GridView ID="gvCandidate" runat="server" AutoGenerateColumns="false" Width="90%"
                      OnRowDataBound="gvCandidate_RowDataBound" CellPadding="5" CellSpacing="0">
         <HeaderStyle BackColor="#333" ForeColor="#FFFFFF" />
         <RowStyle Font-Names="Tahoma" />
         <Columns>
         <asp:BoundField DataField="cnCandidateCode" HeaderText="CandidateCode" />
         <asp:BoundField DataField="cnName" HeaderText="CandidateName" />
         <asp:BoundField DataField="cnQualification" HeaderText="Qualification" />
         <asp:BoundField DataField="cnContactNumber" HeaderText="ContactNumber" />
         <asp:BoundField DataField="cnAddress" HeaderText="Address" />       
         </Columns>
        </asp:GridView>

protected void gvCandidate_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.DataRow)
        {
            // onmouseover we will assign the highlighting color css
            e.Row.Attributes.Add("onmouseover", "this.className='gvRowhighlightColor;';");
            // onmouseout we will revert to default color css 
            e.Row.Attributes.Add("onmouseout", "this.className='gvRowDefaultColor';");
        }
        }

/>

Output
My previous post Email id validation using javascript in Asp.net