Table with Multiple Fields within a Sortable Column

This example shows how you can have column-sorting links to sort by a field anywhere on the page.  You can also sort by fields that are not displayed on the page.

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">

              <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>

          </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.