Table with Different Alternating Rows

This example shows how you can have a completely different layout for each alternating row.  In this example, each row alternate between left justification and right justification.  This example also shows how you can create links to sort by a database field and place it anywhere on the page.

Description

Generated Page

Layout Page File

 

     <div align="center">

          <GEN:Table Name="Products">

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

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

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

                   <td>

                        <GEN:FieldLabel Name="SortByName" />&#160;

                        <GEN:FieldLabel Name="SortByPrice" /></td>

              </tr>

              <GEN:ItemTemplate>

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

                   <td>

                        <b><GEN:FieldValue Name="ProductName" /></b>

                        <br />Unit Price:

                        <GEN:FieldValue Name="UnitPrice" />

                        <br />In Stock:

                        <GEN:FieldValue Name="UnitsInStock" /></td>

              </tr>

              </GEN:ItemTemplate>

              <GEN:AlternatingItemTemplate>

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

                   <td align="right" bgcolor="#C0C0C0">

                        <b><GEN:FieldValue Name="ProductName" /></b>

                        <br />Unit Price:

                        <GEN:FieldValue Name="UnitPrice" />

                        <br />In Stock:

                        <GEN:FieldValue Name="UnitsInStock" /></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.