Column Properties

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.

tmpl.Field_Info[N] .Column.Hide as L

Column heading 

The label that identifies the column o row.

tmpl.Field_Info[N] .Column.Heading as C

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.

tmpl.Field_Info[N] .Column.LabelInLineStyle as C

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.

tmpl.Field_Info[N] .Column.Heading_Left as C

Row label position 

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

tmpl.Field_Info[N] .Column.LabelPosition as C

Can sort 

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

tmpl.Field_Info[N] .Column.Sort as C

Sort field 

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

tmpl.Field_Info[N] .Column.Sort as C

Freeform layout 

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

tmpl.Field_Info[N] .Column.Type as C

Freeform template 

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

tmpl.Field_Info[N] 
.Column.FreeFormTemplate = <<%html% 
' code here 
%html%

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.

tmpl.Field_Info[N] .Column.InLineStyle as C

Security level 

If the user is logged in with a security level that is lower than the security level you specify here, the column or row will be hidden. Set the security level to 0 to always show this column or row.

tmpl.Field_Info[N] .Column.SecurityLevel as N

Style label if error 

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

tmpl.Field_Info[N] .Column.StyleLabelIfFieldError as L

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).

tmpl.Field_Info[N] .Column.ErrorLabelInLineStyle as C

Break Type 

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

tmpl.Variable_Info[N] .Breaktype as C

Column Span 

The number of columns to group together.

tmpl.Variable_Info[N] .nCols as N

Formatting Grid Controls 

Opening a Grid Component 

  1. Select "Web Components" in the left pane, so that you can see your new grid component.

  2. 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.

  1. Display the Grid > Fieldspage.

  2. 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;".

  3. 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;".

  4. 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;".

  5. 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;".

  6. 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;".

  7. 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;".

  8. 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

See Also