Column Properties

IN THIS PAGE

Hide column
Column heading
Column in-line style
Heading prefix, Label prefix
Row label position
Can sort
Sort field
Freeform layout
Freeform template
Cell in-line style
Style label if error
Label in-line error style
Break Type
Column Span
Formatting Grid Controls
Opening a Grid Component
Modifying Grid Controls
Dynamic Column and Row Grid Headings

Description

There are situations where you will want to hide a column or row. This will be true if you are placing the field in a different column or row using a Freeform template. A freeform layout allows to insert any HTML code plus any combination of fields on the grid into a grid column.

For example, although your database had firstname and lastname fields, a freeform layout could display a single name field that combined these two values. In almost all cases you will want to define the column or row heading. If you want to control access to this field, you may set a minimum security level requirement (V7). A users with a too low security level will not be able to see the column. The column's cell in-line style field defines additional HTML formatting that you want to apply to the cell of the grid. If you wanted to change the border or background of the cell, this is where you would do it. The can sort property enables and disables the ability to click on the column heading and sort the current page based on the values in the selected column.

Hide column

Hides the column or row that would contain this field. You might choose to hide the field if it was displayed in a free-form layout.

Column heading

The label that identifies the column or row.

Column in-line style

Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

Heading prefix, Label prefix

Specify HTML text or the path to and name of an image to be displayed to the left of the row or above the column heading.

Row label position

The position of the label in relationship to the control. The options are:"Left", "Right", "Above", "Below"

Can sort

Specifies whether the grid will be sorted when the user clicks on the column or row heading.

Sort field

Specify the field(s) to sort on when user clicks on the column or row title. Put commas between field names.

Freeform layout

Specify if this column or row should display just this field, or allow a free-form layout. The options are: "Freeform"

Freeform template

Click [...] to display the Freeform Column Layoutdialog box to define the fields and formats to display in this grid cell.

Cell in-line style

Specifies style attributes that override the settings inherited from the style sheet. Click [...] to define the In-line style. Refer to the Style Editor for details.

Style label if error

Specify if the label should be styled if a validation error occurs (V6 only).

Label in-line error style

Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details (V6 only).

Break Type

Forces a new row either before or after a control. The options are: "None", "Break before", "Break after", "Break before and after"

Column Span

The number of columns to group together.

Formatting Grid Controls

Opening a Grid Component

Select "Web Components" in the left pane, so that you can see your new grid component.
Select "AlphaSports_Customer_Grid" and click Edit.

At this point your new grid should look something like the following (using the default cascading style sheet).

Modifying Grid Controls

There are many formatting options available through the Grid Component Buildermenus. We will just make a few modifications to some of the (textbox) controls show you how easy it is.

Display the Grid > Fieldspage.
Select "Customer_Id" in the Selected Fieldslist.
- 1. Change its Column Properties > Column headingto "ID".
- 2. Change its Column Properties > Heading in-line style to "text-align: left;".
Select "Firstname" in the Selected Fieldslist.
- 1. Change its TextBox Properties > Sizeto 10.
- 2. Change its Column Properties > Column headingto "First Name".
- 3. Change its Column Properties > Heading in-line style to "text-align: left;".
Select "Lastname" in the Selected Fieldslist.
- 1. Change its TextBox Properties > Sizeto 10.
- 2. Change its Column Properties > Column headingto "Last Name".
- 3. Change its Column Properties > Heading in-line style to "text-align: left;".
Select "Company" in the Selected Fieldslist.
- 1. Change its TextBox Properties > Sizeto 20.
- 2. Change its Column Properties > Heading in-line style to "text-align: left;".
Select "Phone" in the Selected Fieldslist.
- 1. Change its TextBox Properties > Sizeto 17.
- 2. Change its Column Properties > Heading in-line style to "text-align: left;".
Select "Fax" in the Selected Fieldslist.
- 1. Change its TextBox Properties > Sizeto 17.
- 2. Change its Column Properties > Heading in-line style to "text-align: left;".
Select the Live Previewtab. The grid should now look something like this.

Dynamic Column and Row Grid Headings

If you would like to be able to dynamically change the title of a grid column or row, the solution to creating conditional headings in grid components is to define a variable that contains the column or row heading that you want to display. Change "component_name" to the name of your component. Change "[1]" to reflect the index number of the column or row you wish to modify. Add additional Xbasic code to set the value of var1.

with tmpl_1
    componentName = "component_name"
    with field_info[1]
        .Column.Heading = var1
    end with
end with