Table with Alternating Rows

This example shows how you can have an alternating layout for the rows of a table.  In this example, you can specify the exact same layout, but with a different background color.  Later examples show how you can have a completely different layout for the alternating row.

Description

Generated Page

Layout Page File

 

     <div align="center">

          <GEN:Table Name="Products">

          <table cellpadding="5" style="border-collapse: collapse" border="1"

                        bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">

              <GEN:ItemTemplate>

              <tr style="font-family:Verdana; font-size:10px">

                   <td>

                        <GEN:FieldValue Name="ProductId" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="ProductName" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="UnitPrice" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="UnitsInStock" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="Discontinued" />

                   </td>

              </tr>

              </GEN:ItemTemplate>

              <GEN:AlternatingItemTemplate>

              <tr bgcolor="#CCFFCC" style="font-family:Verdana; font-size:10px">

                    <td>

                         <GEN:FieldValue Name="ProductId" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="ProductName" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="UnitPrice" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="UnitsInStock" />

                   </td>

                   <td>

                        <GEN:FieldValue Name="Discontinued" />

                   </td>

              </tr>

              </GEN:AlternatingItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

Step 1:  Create the layout page file as shown above containing both ItemTemplate and AlternatingItemTemplate code generation tags.  Note that the names of the FieldValue tags are the same within the surrounding GEN:ItemTemplate and GEN:AlternatingItemTemplate tags.

You can also create a different alternating layout as well.

Step 2:  Set the data binding properties for the FieldValue tags.

Step 3:  Build and run the application.