Column Properties
- 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
See Also