views:

2315

answers:

6

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.

+15  A: 

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
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
A: 

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
+3  A: 

Apply the classes with JQuery.

$('.divtable > div:odd').addClass('dark');
$('.divtable > div:even').addClass('light');
Lachlan Roche
This relies on JavaScript being enabled in the browser, which is an unnecessary restriction.
Richard Ev
+2  A: 

You could use jQuery instead. This answer to a previous question may help: http://stackoverflow.com/questions/287489/jquery-zebra-selector

Keith Bloom
This relies on JavaScript being enabled in the browser, which is an unnecessary restriction.
Richard Ev
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
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
+3  A: 

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

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

+1  A: 

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

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