Display Record with Search and Pagination

This example expands upon the previous example and adds previous and next buttons to cycle through multiple records that might be returned as part of a search.  This example also demonstrates the use of pagination controls.  Pagination controls, just like search controls, have an invisible paging control and a visible button.  When the button is pressed, it sends an event to the invisible paging control to update the table.

Description

Attribute

Description

Layout Page File

SearchAndPagination.html

Properties File

SearchAndPagination.xml

Code Generation Tags Used

GEN:SearchFilter
GEN:PagingControl
GEN:PushButton with GEN:Table
Generated Page

Layout Page File

 

     <div align="center" style="font-family:Verdana; font-size:10px">

          Search Product:

          <GEN:SearchFilter Name="SearchTextBox" />&nbsp;&nbsp;

          <GEN:PushButton Name="Search" /><br/>

          <GEN:PagingControl Name="Previous" Type="PreviousPage" />

          <GEN:PushButton Name="PreviousButton" />&nbsp;

          <GEN:PagingControl Name="Next" Type="NextPage" />

          <GEN:PushButton Name="NextButton" />

          <GEN:Table Name="Product">

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

                        bordercolordark="#C0C0C0">

              <GEN:ItemTemplate>

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

                   <td align="right">Product Id:</td>

                   <td style="font-weight: bold"> <GEN:FieldValue Name="ProductId" /> </td>

              </tr>

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

                   <td align="right">Product Name:</td>

                   <td style="font-weight: bold"><GEN:FieldValue Name="ProductName" /></td>

              </tr>

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

                   <td align="right">Unit Price:</td>

                   <td style="font-weight: bold"><GEN:FieldValue Name="UnitPrice" /></td>

              </tr>

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

                   <td align="right">Units in Stock:</td>

                   <td style="font-weight: bold"><GEN:FieldValue Name="UnitsInStock" /></td>

              </tr>

              </GEN:ItemTemplate>

          </table>

          </GEN:Table>

     </div>

Procedure

This example is similar to the earlier example with just the search control, so see earlier procedure.  Just like there is a search text box and a separate button to begin the search, there is a paging control and a separate button to begin the process of paging.  The paging control does not have a layout and is not displayed to the user, but receives the events generated from the button.

Step 1:  Set the properties for each of the paging controls.  Select the Pagination Type and the corresponding Pagination Button.  For example, for the Previous paging control code generation tag, select the Pagination Type as Previous Page and the Pagination Button as the PreviousButton.

Tag Property

Setting

Code generation tag

PreviousPage
NextPage

Pagination type

Previous Page

Pagination button

Previous Button

Step 2:  Each of the paging controls must have a corresponding button.  The button can be a GEN:LinkButton, GEN:ImageButton, GEN:PushButton or have a composite layout using GEN:Button.

Tag Property

Setting

Code generation tag

PreviousButton
NextButton

Button Command

Activate

Validate page data

False  (not selected)

Step 3:  Hook up the search button and search text box to inform the table when the button is clicked.  In the Page Properties dialog, select the Search control and go to the Bindings tab.  Select SearchTextBox as the control to hook up.

Tag (control)

Control to filter (binding)

Search

Products

SearchTextBox

Products

Step 4:  Build and run the application.