Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET repeater alternate row highlighting without full blown <alternatingitemtemplate/>

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.


C#

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

VB

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

This helped me

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

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


Apply the classes with JQuery.

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

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


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

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

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