Displaying Repeating Forms
Grids have three different formats.
"Tabular" - a multi-record view similar to a browse, view, or spreadsheet, which you have seen already.
"Columnar" - a single-record view that places the field labels to the left of the fields. You can modify the columnar style to display multiple records.
"Stacked Columnar" - a single-record view that places the field labels above the fields. You can modify the stacked columnar style to show multiple records.
Creating a Columnar Grid
Create a new grid based on the AlphaSports customer table.
Display the Component Type page.
In the Grid layout list select "Columnar".
Select the Fields
Display the Grid > Fields page.
Select the "Customer_ID", "Firstname", "Lastname", "Company", "Bill_Address1", "Bill_State_Region", "Bill_Postal_Code", and "<Rownumber>" fields and click to move them from the Available Fields list to the Selected Fields list.
For the different fields, change the Row Properties > Row label values as follows.
"Customer_ID" to "ID".
"Firstname" to "First Name".
"Lastname" to "Last Name".
"Bill_Address1" to "Address".
"Bill_State_Region" to "State".
"Bill_Postal_Code" to "Postal Code".
Select the "<Rownumber>" field. Click to move it to the top of the Selected Fields list.
Select each of the fields in the Selected Fields list.
Change the Label Properties > In-line style field to "width: 1in;".
Change the Row Properties > Row label in-line style field to "width: 1in;".
Setting Columnar Grid Properties
The following example produces a 3 by 3 grid with 9 forms. If the grid is not going to allow the user to enter new records, and you want a neat rectangular array, the Rows of data property must be even divisible by the Repeating columns property.
Display the Grid > Properties page.
Change the Layout Options > Repeating columns to 3.
Change the Layout Options > Rows of data to 9. These two changes causes the display of a 3 by 3 grid of forms.
Change the Layout Options > Font size to "Smaller".
Open the Style list and select "Arizona".
Click to save the component as "AlphaSports_Customer_Grid_2".
Click Close to close the Grid Builder.
Click New > Web Page (A5W) to display the HTML Editor.
Click and name the page "AlphaSports_Page_2".
Click Insert Component.
Click Select, select the "AlphaSports_Customer_Grid_2" and click OK > OK.
Preview the Grid
Click to preview the grid in your browser. It should look something like this. [Picture]
Alpha Five Version 6 and Above