Table within a Table

Updated April 13, 2006
Iron Speed Designer V3.2

This example shows how to display an interior table within each row of an exterior table.  Another way to look at this is adding a one-to-many table inside a one-to-many table.  This arrangement works well for displaying master-detail data within a tabular format.

The result is a Show Record page for the Customers table which contains a one-to-many Orders table which itself contains a one-to-many Orders Details table.

Generated Page

Layout Page File

<GEN:TABLE NAME="OrdersTable">

     <tr class="column_header">

          <td class="header_cell" colspan="3"><img src="../Images/Everest/space.gif" height="1" width="1" alt=""></td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="OrderIDFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="CustomerID1FieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="EmployeeIDFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="OrderDateFieldLabel"></GEN:FIELDLABEL>

          </td>

 

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="RequiredDateFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShippedDateFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipViaFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="FreightFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipNameFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipAddressFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipCityFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipRegionFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipPostalCodeFieldLabel"></GEN:FIELDLABEL>

          </td>

          <td class="header_cell">

              <GEN:FIELDLABEL NAME="ShipCountryFieldLabel"></GEN:FIELDLABEL>

          </td>

     </tr>

     <GEN:ITEMTEMPLATE NAME="RecordRow">

     <tr>

          <td class="icon_cell" width="1">

              <GEN:IMAGEBUTTON NAME="RecordRowEditButton"></GEN:IMAGEBUTTON>

          </td>

          <td class="icon_cell" width="1">

              <GEN:IMAGEBUTTON FILE="../Shared/Button.html"

                                                          NAME="RecordRowViewButton"></GEN:IMAGEBUTTON>

          </td>

          <td class="icon_cell" width="1">

              <GEN:SELECTION TYPE="Single" NAME="RecordRowSelection"></GEN:SELECTION>

          </td>

          <td class="table_cell" Style = "Text-Align:Right">

              <GEN:FIELDVALUE NAME="OrderIDTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="CustomerID1TableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" Style = "Text-Align:Right">

              <GEN:FIELDVALUE NAME="EmployeeIDTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="OrderDateTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="RequiredDateTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShippedDateTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" Style = "Text-Align:Right">

              <GEN:FIELDVALUE NAME="ShipViaTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" Style = "Text-Align:Right">

              <GEN:FIELDVALUE NAME="FreightTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipNameTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipAddressTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipCityTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipRegionTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipPostalCodeTableFieldValue"></GEN:FIELDVALUE>

          </td>

          <td class="table_cell" >

              <GEN:FIELDVALUE NAME="ShipCountryTableFieldValue"></GEN:FIELDVALUE>

          </td>

     </tr>

     <!—start -->

     <tr>

          <td colspan="17" align="center">

          <GEN:TABLE NAME="Order_DetailsTable">

          <table cellpadding=”0” cellspacing=”0” border=”0”>

              <tr class="column_header">

                   <td class="header_cell" colspan="3"><img src="../Images/Everest/space.gif" height="1" width="1" alt=""></td>

                   <td class="header_cell"><GEN:FieldLabel NAME="OrderID1FieldLabel" /></td>

                   <td class="header_cell"><GEN:FieldLabel NAME="ProductIDFieldLabel" /></td>

                   <td class="header_cell"><GEN:FieldLabel NAME="UnitPriceFieldLabel" /></td>

                   <td class="header_cell"><GEN:FieldLabel NAME="QuantityFieldLabel" /></td>

                   <td class="header_cell"><GEN:FieldLabel NAME="DiscountFieldLabel" /></td>

              </tr>

              <GEN:ITEMTEMPLATE NAME="RecordRow2">

              <tr>

                   <td class="icon_cell"  scope="row" >

                   <GEN:ImageButton NAME="RecordRowEditButton2" />

                   </td>

                   <td class="icon_cell" width="1">

                   <GEN:ImageButtonFILE="../Shared/Button.html" NAME="RecordRowViewButton2" />

                   </td>

                   <td class="table_cell" Style = "Text-Align:Right">

                   <GEN:FieldValue NAME="OrderID1TableFieldValue" />

                   </td>

                   <td class="table_cell" Style = "Text-Align:Right">

                   <GEN:FieldValue NAME="ProductIDTableFieldValue" />

                   </td>

                   <td class="table_cell" Style = "Text-Align:Right">

                   <GEN:FieldValue NAME="UnitPriceTableFieldValue" />

                   </td>

                   <td class="table_cell" Style = "Text-Align:Right">

                   <GEN:FieldValue NAME="QuantityTableFieldValue" />

                   </td>

                   <td class="table_cell" Style = "Text-Align:Right">

                   <GEN:FieldValue NAME="DiscountTableFieldValue" />

                   </td>

              </tr>

               </GEN:ITEMTEMPLATE>

          </table>

          </GEN:TABLE>

          </td><td>

          </td>

     </tr>

     <!—end -->

     </GEN:ITEMTEMPLATE>

</GEN:TABLE>

Procedure

Step 1:  Using Iron Speed Designer's Application Wizard, create an application using the Customers, Orders, and Order Details tables in the Northwind database.

Step 2:  Locate the ShowCustomerPage.html layout page file, e.g.:

…\<Application Folder>\Customers\ShowCustomersPage.html

Step 3:  Edit the ShowCustomersPage.html layout page file to add:

<GEN:Table> .... </GEN:Table>

to the master-detail Orders table's <GEN:ItemTemplate>.  The layout page file above shows this additional HTML starting at <!-- start --> and ending at <!-- end -->.

Step 4:  Join the inner and outer tables with a WHERE clause.  To do this, display the Page Properties dialog (Tools, Page Properties), select the Order_DetailsTable node and go to the Query tab.  Select the “Select record(s)” option and select the “Order Details” table from the dropdown list.

Then, add this WHERE clause:

WHERE Order Details.OrderID = Orders.OrderID

Step 5:  In the Page Properties dialog, expand the Order_DetailsTable node, and set the following for each FieldLabel control.

Tab

Property

Setting

Bindings

Table, view, or query

Order Details

Bindings

Field

<Field name>

Expand the RecordRow2 node under the Order_DetailsTable node, and set the following for each FieldValue control.

Tab

Property

Setting

Bindings

Table, view, or query

Order Details

Bindings

Field

<Field name>

Step 6:  Set the properties for the Edit and Show icons.

For the Edit icon:

Tab

Property

Setting

Display

Image file(URL):

../Images/Icon_edit.gif

Display

Tool tip text:

Edit record

Bindings

Button Command

Redirect

Bindings

Action After Command

Go to a specific URL:

Bindings

URL

../Order Details/EditOrder_DetailsPage.aspx

Bindings

Parameters

Order_Details={Order_DetailsTable:PK}

For the View icon:

Tab

Property

Setting

Display

Image file(URL):

../Images/Icon_view.gif.

Display

Tool tip text:

View record

Bindings

Button Command

Redirect

Bindings

Action After Command

Go to a specific URL:

Bindings

URL

../Order Details/ShowOrder_DetailsPage.aspx

Bindings

Parameters

Order_Details={Order_DetailsTable:PK}

Step 7:  Build and run the application.

You will now be able to see a one-to-many table inside a one-to-many table.