How to alternate row color using DVWP’s

I was on twitter the other day (like that is a surprise to anyone) and came across a question.  How do you alternate color for each row within a DVWP.  This is very easy when configuring the webpart within the list view and as it turns out, painless as well within the DVWP’s too.

Assuming you already have been schooled in making DVWP’s, let’s hop right into it.  After adding you DVWP to the page, put your cursor in the first row of the data that is displayed.  Make sure you do *NOT* put your cursor in the Column Title row…

Next you’ll want to right click within that cell and hover over the Select option, then pick Row.  This will highlight the entire row for you.  Now we can setup conditional formatting on our DVWP to display a color for every row.  By clicking on the chevron off to the right of the DVWP, you’ll get a fly-out menu with a lot of different options:

Click on Conditional Formatting from this menu, so we can setup the formatting for each row.  Click on Create and select Apply Formatting from this menu:

What we need to do is tell the DVWP a condition that we will expect to occur within our DVWP.  This could be a pretty much anything and it’s not bound to just what I’m showing.  Since we want each row to have a different color, choose [Row Number] is Odd from the Condition Criteria.

After clicking on OK, we’ll be prompted for the formatting we’d like to see when the condition is met.  We need to set the background to a certain color.  Select background from the left side and click on the drop down for background-color.

I’ve selected a very light grey because it’s easy on the eyes and looks good with my color scheme.  Feel free to play around with all of these options.  Conditional formatting is a very powerful tool when displaying data and I’ve only scratched the surface myself…

Here is my end result:

Feel free to ask questions!  P.S. I’ve also tested this with joins and merges and it works just fine.