ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>
C#asp.netData BindingExtension MethodsRepeaterC# Problem Overview
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.
C# Solutions
Solution 1 - C#
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.
Solution 2 - C#
C#
class="<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>"
VB
class="<%# iif(Container.ItemIndex Mod 2 = 0,"","alternate") %>"
Solution 3 - C#
This helped me
class='<%# Container.ItemIndex % 2 == 0 ? "" : "alternate" %>'
Previous answer resulted in "Server Tag is not well formed" error.
Solution 4 - C#
Apply the classes with JQuery.
$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
Solution 5 - C#
You could use jQuery instead. This answer to a previous question may help: https://stackoverflow.com/questions/287489/jquery-zebra-selector
Solution 6 - C#
Little tweak: the empty class could be removed with something like:
<%# Container.ItemIndex % 2 == 0 ? "<tr>" : "<tr class='odd'>" %>
Solution 7 - C#
No need for code. Here's a pure CSS solution:
.item:nth-child(odd){background-color: #ccc}
.item:nth-child(){background-color: #ddd}
Solution 8 - C#
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;
}