56

I'm trying to accomplish simply adding a css class to a div on alternate rows in my <itemtemplate/> without going to the overhead of including a full blown <alternatingitemtemplate/> which will force me to keep a lot of markup in sync in the future.

I've seen a solution such as http://blog.net-tutorials.com/2009/04/02/how-to-alternate-row-color-with-the-aspnet-repeater-control/ which I'm tempted to use but this still doesn't "smell" right to me.

Has anyone else got a more maintainable and straightforward solution? Ideally I'd like to be able to do something like:

<asp:repeater id="repeaterOptions" runat="server">
        <headertemplate>
            <div class="divtable">
                <h2>Other Options</h2>
        </headertemplate>
        <itemtemplate>
                <div class="item <%# IsAlternatingRow ? "dark" : "light" %>">

But I can't figure out how to implement IsAlternatingRow - even with extension methods.

Kieran Benton
  • 8,177
  • 11
  • 50
  • 74

8 Answers8

129

There is no need to manage your own variable (either an incrementing counter or a boolean); you can see if the built-in ItemIndex property is divisible by two, and use that to set a css class:

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

This has the benefit of being completely based in your UI code (ascx or aspx file), and doesn't rely on JavaScript.

Richard Ev
  • 48,781
  • 54
  • 181
  • 273
  • 3
    Fantastic Richard, thats exactly the kind of thing I was looking for! Obviously could have used JS like some of the other answers mentioned but you are correct in saying that is an unnecessary restriction. – Kieran Benton May 11 '09 at 12:40
  • @Richard Ev: Would the code run slower or faster if someone would use ItemTemplate and AlternatingItemTemplate instead of this solution? How could i compare the speed of these two identical codes? – Răzvan Flavius Panda Jul 21 '11 at 08:59
  • 2
    @Răzvan: Unsure about the performance differences, though I'd warn against premature optimization for something like this. – Richard Ev Oct 20 '11 at 08:02
  • 3
    For those still coming to this destination, you need to wrap the server-side logic block with single quotes. Otherwise, you might receive a warning/error about Literal Controls not being allowed – GoldBishop Nov 21 '16 at 21:24
  • Late to the party but like others have said great answer! No need to reinvent the wheel – Master Yoda Oct 10 '19 at 15:12
17

C#

class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"

VB

class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"
Shubh
  • 6,279
  • 8
  • 42
  • 74
6

This helped me

class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'

Previous answer resulted in "Server Tag is not well formed" error.

Seven
  • 725
  • 10
  • 16
4

Apply the classes with JQuery.

$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
Lachlan Roche
  • 24,892
  • 4
  • 76
  • 75
2

Little tweak: the empty class could be removed with something like:

  <%# Container.ItemIndex % 2 == 0 ?  "<tr>" : "<tr class='odd'>"  %>
Rick
  • 33
  • 1
  • 4
2

You could use jQuery instead. This answer to a previous question may help: jQuery Zebra selector

Community
  • 1
  • 1
Keith Bloom
  • 2,291
  • 2
  • 17
  • 29
  • This relies on JavaScript being enabled in the browser, which is an unnecessary restriction. – Richard Ev May 11 '09 at 12:29
  • It depends on the features that are required to work if JavaScript isn't available. In this case the site will still work but the table will be less readable which I feel is acceptable. – Keith Bloom May 11 '09 at 12:36
  • Good point, though my general approach is to use JavaScript only for things that require it, or that are overly onerous to achieve without it. In this case it's trivial to achieve table striping without JavaScript, hence my recommendation. – Richard Ev May 11 '09 at 14:24
1

No need for code. Here's a pure CSS solution:

.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

graphicdivine
  • 10,539
  • 7
  • 30
  • 58
0

IsAlternatingRow can be a protected property and will get set in the ItemDataBound or ItemCreated event.

protected void rpt_ItemDataBound(object sender, EventArgs e)
{
    IsAlternatingRow = !IsAlternatingRow;
}
Kirtan
  • 20,187
  • 6
  • 43
  • 60