Interleave row/column colors in a GridView

Question

Suppose you have a GridView with a few columns like:

| Foo | Bar | Total |

and you use a style sheet to make the alternating rows different colors, say light blue and white.

Is there a good way to make a particular column alternate in a different color? For example, I might want the Total column to alternate in medium and light red to bring attention to it in a large grid.

BTW, I know you can programmatically change the color of a cell. I'd like to stick to CSS if it all possible, however, so all my style stuff is in one place. I also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler.

Answer 1

If you're using jQuery, you can do it pretty easily.

$("table#myTable col:odd").css("background-color:#ffe");

the :odd selector is not available in most current browsers, but jQuery gives it to us today.

For rows, you can do it with the built-in AlternatingRowStyle element.

Edit: found a good resource for some different ways of doing this: http://css-discuss.incutio.com/?page=StylingColumns

Answer 2

In addition to Ben's suggestion, Matt Berseth also has quite a nice demo of how to do rollover highlighting of columns as well using the GridViewControlExtender which is quite nice:

http://mattberseth2.com/demo/Default.aspx?Name=GridViewControlExtender+II+-+Header+Cell+MouseOver+Styles+and+a+Few+More+Live+Examples&Filter=All

There's also a ton of other stuff on how to enhance your GridView on his site as well:

http://mattberseth.com/blog/gridview/

Quite a few of the examples use the ASP.NET Ajax and Ajax Control Toolkit bits, but they're not too hard to port to lightweight jQuery equivalents.

Answer 3

going off on 2 tangents here...

P.S. "also don't see an easy way to tell if I'm in an alternating row when I'm inside the event handler."

Row.RowState == RowState.Alternating

Also, you can always set the CssClass on the appropriate cells in ASP.NET, and then define that class in your css.

Answer 4

I found this when searching for the same question regarding the WPF ListView's GridView. There, the answer is to use a StyleSelector like this one described by Bea Costa:

public class ListViewItemStyleSelector : StyleSelector
{
    private int i = 0;
    public override Style SelectStyle(object item, DependencyObject container)
    {
        // makes sure the first item always gets the first style, even when restyling
        ItemsControl ic = ItemsControl.ItemsControlFromItemContainer(container);
        if (item == ic.Items[0])
        {
            i = 0;
        }
        string styleKey;
        if (i % 2 == 0)
        {
            styleKey = “ListViewItemStyle1″;
        }
        else
        {
            styleKey = “ListViewItemStyle2″;
        }
        i++;
        return (Style)(ic.FindResource(styleKey));
    }
}

There are a few nits to pick to get this to work really well, which are all described in her blog post.

One thing that connot be helped, is that this only works for rows. Columns seem to always have to use the CellTemplate/Style.