Home
Products
Forums
Help
Publish Article
Go Freelance

How to highlight datagrid or GridView row on mouse over?

Downloads

If you are seeing this section and do not see download links, this means that you are not logged into our site. If you already are a member, click on the login link and login into site and come back to this page for downloading the control files. If you are not a member, click on registration link to become a Winista member and download the control for free.

In this article I will be discussing how you can highlight a row in datagrid or grid view when mouse moves over a row. The article uses technique of adding handlers for onmouseover and onmouseout javascript events for the row. In the event handlers the style sheet for the row is switched to highlight the row and when mouse moves out, the style sheet is switched back to normal.

Following are the steps that you need to execute this technique.

  • Create styles for normal and highlight view of the row. For example in the attached project we use the following styles.
<style type="text/css">
    .normalrow
    {
        background-color:white;
    }
    .hightlighrow
    {
        background-color:#cccccc;
    }
</style>							
							
  • Now add handler for RowCreated event for the grid and in this event add the attributes for onmouseover and onmouseout javascript events. Following code snippet shows how this has been done in the attached project.
protected void OnRowCreated(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes.Add("onmouseover", "this.className='hightlighrow'");
        e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
    }
}							
							

You can download the sample project and play with it to see how this works.

Go Freelance
Home     About us     Contact us    Copyright    Privacy Policy    Return Policy    Advertisers
Copyright © Netomatix