Table Column with Multiple Fields

This example shows how can display multiple fields within a column.  For example, you might store the first name and the last name of a customer in separate database fields, but would like to display them within a column.  This can be accomplished by specifying a layout where the display column contains two GEN:FieldValue tags.

Description

Attribute

Description

Layout Page File

TableCustomLayout.html

Properties File

TableCustomLayout.xml

Code Generation Tags Used

GEN:ItemTemplate

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>

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

                        <br />Unit Price: <GEN:FieldValue Name="UnitPrice" />

                        <br />In Stock: <GEN:FieldValue Name="UnitsInStock" /></td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

Step 1:  Create the layout page file as shown above containing the ItemTemplate code generation tag with the desired layout.  The contents can be displayed in a tabular format as shown in previous examples or can be shown with any custom layout you specify.

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.