Highlight gridview row on mouse over in asp net web page

In ASP.Net, programmers heavily use the gridview control for data display. Adding some effects in gridview will change the look and feel and make it more interactive for users. One such of effects is highlighting the gridview row on mouse over. With this short background let's go for the design markup of the example gridview.

<asp:GridView ID="gridSample" runat="server" OnRowCreated="gridSample_RowCreated"

        AutoGenerateColumns="false">

        <Columns>           

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

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

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

        </Columns>

 </asp:GridView>

Now we have gridview, so let’s create the style for highlight the row on mouse over.

<style type="text/css">

   /*for gridview row hover, select etc*/

   .OnOut

    {

       background-color: white;

cursor:default;

    }

       

    .OnOver

     {

       background-color: #cccccc;

cursor:pointer;

     }

</style>

Now write some line of codes on gridview row created event handler of design markup.

protected void gridSample_RowCreated(object sender, GridViewRowEventArgs e)

{

   if (e.Row.RowType == DataControlRowType.DataRow)

   {

        e.Row.Attributes.Add("onmouseover", "this.className='OnOver'");

        e.Row.Attributes.Add("onmouseout", "this.className='OnOut'");

    }

}

In the above code, 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 mouse over and on mouse out the effect will be void.

Happy coding!!