Highlight Rows in a GridView

To highlight rows in a GridView you will want to use the GridView DataBound event to add the onmouseover and onmouseout attributes. While CSS methods may work in FireFox browsers, they do not work in Internet Explorer. For the associated javascript method, you can directly set it with this.style.backgroundColor, but this is inflexible. Instead, change the CSS class.

Here is the CSS for the highlighted and normal row (see reference for source of the simple CSS):

<style type="text/css">

.normalRow
{
background-color:white;/* You can update the background Color to normal Gridview Back Color */
cursor:pointer;/* You can change cursor pointer to default, Pointer etc */
}

.highlightRow
{
background-color:Gray;/* You can change the background Color of the row to whatever color you want. You can also give Hexadecimal color code also */
cursor:pointer;/* You can change cursor pointer to default, Pointer etc */
}

</style>

Here is the CodeBehind for the GridView DataBound event:

    protected void GridView1_DataBound(object sender, EventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            if (row.RowType == DataControlRowType.DataRow)
            {
                row.Attributes.Add("onmouseout", "this.className='normalRow'");
                row.Attributes.Add("onmouseover", "this.className='highlightRow'");
            }
        }
    }

Further modifications for multiple class rows can be made by checking the original CssClass (or checking implicitly by rowCount%currentRow for alternating rows) in the CodeBehind and setting the onmouseout event to switch back to that original class. Another example where this may be necessary is with check box rows that can be selected.


References:

• http://www.mikesdotnetting.com/Article/37/How-to-highlight-a-GridView%27s-row-on-hover
• http://www.dotnetspark.com/kb/673-highlight-row-gridview-on-mouseover-using.aspx

Prevent wrapping in table cell

Prevent wrapping in table cell. Since the old nowrap method is out of favor, the new method is to use:

<td style="white-space:nowrap"> foo </td>

reference: http://www.thescripts.com/forum/thread468471.html
Note: this also works with a Calendar Extender and TextBox even if the cell is too short.

Microsoft Visual Web, CSS, and Images link bug

Here's a clue to avoid a bug with Microsoft Visual Web, CSS, and Images. I used the CSS style tool to add an image to an element, but the image would not show. The cause was a faulty link to the image.

Here is an example. I edit my StyleSheet.css in the css folder. I add an image from the brother folder named images. The link will say images/mypic.gif, but it is actually ../images/mypic.gif. Problem solved.