Table

Table container allows creating tables for data input and display.

Form tables have a hierarchical structure in which the Table container is the parent.

Each widget placed inside of the Table container will appear under a separate table column.

Form XML code

Table container with two columns:

CSS element filter:

Inheritance diagram:

Most commonly used form properties:

classnames

identifier

isMultiSelect

horizontalAlignment

verticalAlignment

preferredSize

rowCount

rowHeight

unsortableColumn

Associated functions:

fgl_grid_export()

fgl_grid_viewexport()

fgl_grid_header()

Associated ui.Table methods:

Create

ForName

Associated ui.TableColumn methods:

Create

ForName

SetColumnLength

GetColumnLength

SetColumnNum

GetColumnNum

SetControl

GetControl

SetEditControl

GetEditControl

SetFooter

GetFooter

SetReadOnly

GetReadOnly

SetResizable

GetResizable

SetSorted

GetSorted

SetText

GetText

SetUnsortable

GetUnsortable

Influence and behavior:

To add a Table to your form, you

Step 1. Choose a Table from the form containers in Palette.

Step 2. Put it in the form.

Table identifier is linked to the identifier of the screen record nesting the table column fields. Therefore, editing one of these IDs automatically changes the other.

 

Each widget placed into the Table appears in a separate table column. When you add other columns, they automatically fill the table width.

To specify a column header, set the necessary name in the column Text property:

To rearrange the order of columns, drag a column, and drop it at the necessary place:

You can change the width of columns by dragging their right or left edges, if the column width is specified in pixels (see gridLength):

Tables and TableColumns comply with these layout rules:

1. Table body occupies the full height of the table.
2. To give the room for a header/footer, you must set some padding for the Table – top padding for a header and/or bottom padding for a footer.
3. By default, the height of the Table header and/or footer (if any) is equal to rowHeight.
4. Header/footer height can be customized by css styles.
5. Horizontal alignment of the header of a TableColumn depends on its data type (e.g., numeric values are right-aligned.
6. Text alignment set for the header of a TableColumn defines only the alignment of this header. It has no effect on the text alignment of the data in this TableColumn.
7. Text alignment of data in a TableColumn is controlled by the text alignment of the column widget.

 

By default, tables in .fm2 forms do not have horizontal scroll bars – only vertical ones.

To add a horizontal scroll bar to your Table, you must set allow-horizontal-scroll as its classname:

After this, your Table will get a horizontal scroll bar at runtime when (but only when) these conditions are met:

1. Column width was set explicitly (not in % or as Auto).

   Otherwise, at runtime your browser will try to fit table columns into the available space (= spread them through out the table width).

2. The sum of your column widths is greater than the width of the table.

   For example, you will get a horizontal scroll bar if your table is 500 px wide and has two columns of 300 px: 500 px < 300 px + 300 px.

   You will not get a horizontal scroll bar if your table is 500 px wide and has two columns of 200 px: 500 px > 200 px + 200 px.

 

A screen record, where all fields from the table are added, is automatically created:

It is the screen record name that is to be referenced in 4GL to display or input arrays. When you change the order of the table columns in the Form Editor Area, the order of the column field names is not changed in the corresponding screen record.

Therefore, after the columns are arranged, it may be necessary to rearrange the screen record list. To do it, click the fields button to the right of the fields list. This will call the dialog window, where the fields can be moved or deleted:

Table shares with TreeTable some unique properties:

• Grid Color specifies the color of a screen grid sheet
• Image Collapsed specifies the path to the image that will be displayed next to a collapsed tree wrapper item. The property has effect when a tree view wrapper property is applied to a screen grid
• Image Expanded specifies the path to the image that will be displayed next to an expanded tree wrapper item. The property has effect, when a tree view wrapper property is applied to a screen grid