Adding an alternate row color on DataView control

Question

I'm trying to set an alternate color to my DataView control; I tried rowStyleClass and rowStyle but I can't get it to work.

rowStyleClass only gives me hover color for

What I'm doing is using a jQuery snippet:

   $().ready(function() {
      // Apply alternate color row to DataView            
      $(".lotusTable > tbody > tr:odd").addClass("odd");
      $(".lotusTable > tbody > tr:not(.odd)").addClass("even");
   });

This works, but, if partial refresh is executed (change page number; add rows, etc.) I lose the formatting.

Any ideas how can I accomplish this with DataView properties?

I don't know if this can be done with properties or not, but you can execute your jQuery snippet on every partial refresh by hijacking it ([link](http://dontpanic82.blogspot.in/2010/01/xpages-hijackingpublishing-partial.html)). There is a control on XSnippets ([link](http://openntf.org/XSnippets.nsf/snippet.xsp?id=standby-dialog-custom-control)) which uses this hijacking to show a Dojo standby control every time a partial refresh event is fired, which could give you ideas. — Naveen, Apr 05 '13 at 09:38
Put your .ready function inside area which is partialy refreshed (for example DIV around DataView). — Frantisek Kossuth, Apr 11 '13 at 12:10

Steve Zavocki · Answer 1 · 2013-04-04T17:55:57.447

0

Try this CSS, it works great for me in a View Control. I am not currently using jQuery. In the view control I set "rowClasses" equal to "evenrow, oddrow". Of course, the Data View doesn't have rowClasses, so try setting either rowStyle or rowStyleClass to "evenrow, oddrow" and see if that gives what you are trying to accomplish.

.oddrow { 
background-color: rgb(218, 234, 245);
}
.evenrow {
background-color: rgb(255, 255, 255);
}
.evenrow:Hover {
 background-color: rgb(288, 250, 221);
}
.oddrow:Hover {
background-color: rgb(288, 250, 221);
}

edited Apr 04 '13 at 17:55

answered Apr 04 '13 at 17:48

Steve Zavocki

1,840
4
21
35

I already tried this as well; `rowStyleClass="evenrow oddrow"` and it applies only the first class in this case "evenrow" to all rows. I can see also the page source that every has class="evenrow oddrow". – PSolano Apr 04 '13 at 21:38
I believe you have to change in the Source. If you try to enter it in the Design view you get a Validation Error message. It doesn't like the comma. But when entered in the source, it will take an end result of "evenrow, oddrow" with the comma. It won't work without the comma. – Steve Zavocki Apr 04 '13 at 21:51
Doesn't work neither; I think your approach only works with View Controls, at least, this is how I have my other other View Controls. – PSolano Apr 04 '13 at 23:41
Try this: Put your jQuery that works in a named function. Not only call it when the document loads, but also call it when you add rows, change pages, etc. – Steve Zavocki Apr 05 '13 at 14:24

Adding an alternate row color on DataView control

1 Answers1