Table with Sortable Column Headings

This tutorial displays a table that has sort-able column headings.  The column sorting works in the opposite direction if the application user presses the sort link a second time.

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="ProductIdLabel" />

                   </td>

                   <td>

                        <GEN:FieldLabel Name="ProductNameLabel" />

                   </td>

                   <td>

                        <GEN:FieldLabel Name="UnitPriceLabel" />

                   </td>

                   <td>

                        <GEN:FieldLabel Name="UnitsInStockLabel" />

                   </td>

                   <td>

                        <GEN:FieldLabel Name="DiscontinuedLabel" />

                   </td>

              </tr>

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

          </table>

          </GEN:Table>

     </div>

Procedure

Step 1:  Set the Display Style property to Hyperlink for each of the GEN:FieldLabel code generation tags.

Step 2:  The GEN:FieldLabel’s must not be in GEN:HeaderTemplate.  This is because the template tags are not expanded until run time, and event binding can only happen between controls that exist at compile time.

Step 3:  If Hyperlink is selected for any of the GEN:FieldLabel tags, then the tag must be hooked up to the table in order for sorting to be functional.  Go to the Bindings tab in the Page Properties dialog for the SortByName and SortByPrice controls and bind them to the Products table.  Bindings should be set for each FieldLabel tag that is specified as a Hyperlink.

Step 4:  Build and run the application.