Highlight gridview row on mouse over in asp net web page: Adding effects to the gridview control

Programmers heavily use the asp.net gridview control. Adding some effects to the gridview will change the appearance so that user interactivity increases. One of such effects is highlighting the gridview row on mouseover. With this short background let's go for the design markup of the example gridview.

<asp:GridView ID="gridTest" runat="server" OnRowDataBound="gridTest_RowDataBound" AutoGenerateColumns="false">

<Columns>

     <asp:BoundField HeaderText="Status" DataField="Status" />

     <asp:BoundField HeaderText="Name" DataField="Name" />

     <asp:BoundField HeaderText="Comment" DataField="Comment" />

     <asp:BoundField HeaderText="Date" DataField="Date" />

</Columns>

</asp:GridView>

Now we have the asp.net gridview, why not choose the highlighted row's color? Let's define a style sheet class for highlighted row.

<style type="text/css">

        /*for gridview row hover, select etc*/

        .normalrow

            {

                background-color:white;

            }

        .highlightrow

            {

                background-color:#cccccc;

            }

    </style>

(The gridview markup shown above is only for example purpose. So you will not see any matches between the figure showing highlighted row and the example markup. Further you will also need to implement your own css styling, if you prefer any). Note the OnRowDataBound event handler in the gridview design markup. We will write some lines of code in this event handler to add the effect of highlighting gridview rows on mouse over. Here goes the code.

//row created event
    protected void gridTest_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
            e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
        } 
    }

We have specified the css class to adapt by the gridview row on mouse over. At the same time, we need to assign another css class on mouse out so that the gridview will be highlighted only on mouseover and on mouse out the effect will be void. Happy programming!