Parent | Child | Previous | Next
 

Displaying Multiple Tables with a GridLinker

Description

The Web Component Builder provides three methods for displaying data from multiple tables.

  • GridLinker Components

  • Tabbed GridLinker Components

  • Views and SQL SELECT statements

The GridLinker technique combines fields from 1 parent table and 2 or more child tables that have one-to-many relationships. This example is based on the invoice.set of the AlphaSports sample database. Note that for Version 10 and later Ajax linked grids or Ajax row expanders are preferred to the GridLinker.

Creating the Parent Grid Component

  1. Create a new grid based on the AlphaSports "Invoice_Header" table.

  2. Display the Component Type page.

  3. Leave the Grid Layout selection as "Tabular". This produces a multi-record view, with field labels at the tops or bottoms of columns.

  4. Leave the Grid is field set as Read only.

Selecting the Parent Fields to Display

  1. Display the Grid > Fields page.

  2. In the Available Fields list select "Invoice_Number" through "Discount" and click the '>' icon.

Modifying Parent Field Properties

  1. Select the "Invoice_Number" field in the Selected Fields list. Change the Column Properties > Column heading to "#".

  2. Select the "Customer_Id" field in the Selected Fields list. Change the Column Properties > Column heading to "Customer".

  3. Select the "Date" field in the Selected Fields list.

    • Click the '...' button in the Display Settings > Display Format field to display the Display Format dialog box.

    • Click Select Pre-Defined Format, select a date format, and click OK > OK.

  4. Select the "Delivery_By" field in the Selected Fields list.

    • Change the Label Properties > In-line style to "white-space: nowrap;".

    • Change the Column Properties > Column heading to "Delivery".

  5. Select the "Sales_Tax" field in the Selected Fields list.

    • Click the '...' button in the Display Settings > Display Format field to display the Display Format dialog box.

    • Click Select Pre-Defined Format, select a currency format, and click OK > OK.

  6. Select the "Discount" field in the Selected Fields list.

    • Click the '...' button in the Display Settings > Display Format field to display the Display Format dialog box.

    • Click Select Pre-Defined Format, select a currency format, and click OK > OK.

Formatting the Parent Grid

  1. Display the Grid > Properties page.

  2. Click the 'down' icon to display the Select style dialog.

  3. Select "Rio" click OK.

  4. Set the Layout Options > Rows of data field to 4.

  5. Click the Layout Options menu to collapse it.

  6. Check the Shading and Dividers > Alternate row shading check box.

  7. Clear the Shading and Dividers > Alternate column shading check box.

  8. Click the Shading and Dividers menu to collapse it.

  9. Click the Column Titles and Sorting Options menu to collapse it.

  10. Select "Above Grid" in the Record Navigator > Record navigator position list.

  11. Click the Record Navigator menu to collapse it.

  12. Click the '...' button in the Customization > 'Total records' message text field to display the HTML Editor dialog box.

    • Display the Source tab of the editor.

    • Erase all the text between.