ASP.NET repeater alternate row highlighting without full blown

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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.

Method 2

C#

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

VB

class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"

Method 3

This helped me

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

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

Method 4

Apply the classes with JQuery.

$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');

Method 5

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

Method 6

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

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

Method 7

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

Method 8

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;
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0